データソースがローカルにロードされたグリッドがあります (トランスポートを使用していません)。ユーザーが「編集」ボタンをクリックしたときに行にチェックボックスを追加するカスタム エディターを作成できました。ユーザーがフィールドを変更する権限があるかどうかを確認するためにフィールドごとのチェックを行う必要があるため、デフォルトのエディターを使用できません。
「編集」ボタンをクリックすると、期待どおりの結果が得られ、必要な場所にチェックボックスが表示されます。ただし、データを変更して「更新」ボタンをクリックすると、行が削除されます。または、「編集」モードでユーザーが別の行の別の「編集」ボタンをクリックすると、元の行が削除されるか、null データに関するコンソール エラーが発生します。
更新イベントも発生しないように見えるため、データ ソースの更新を手動で処理できます。
dataSource = new kendo.data.DataSource({
data: result,
change: function(e){
console.log('a change happened');
console.log(e);
},
schema: {
model: {
id: "uid",
fields: {
lastName: {editable:false},
firstName: {editable:false},
email: {editable:false},
accountNum: {editable:false},
email: {editable:false},
status: {editable:true},
RQ:{editable:true, type:"boolean"},
RR:{editable:true, type:"boolean"},
ER:{editable:true, type:"boolean"},
}
}
},
batch: true,
pageSize: 50
});
$("#grid").kendoGrid({
dataSource: dataSource,
editable: "inline",
pageable: {
refresh: false,
pageSize: 50,
pageSizes: [
50,
100,
200
]
},
filterable: {
extra: false,
operators: {
string: {
contains: "Contains",
startswith: "Starts with"
},
}
},
reorderable: true,
resizable: true,
columns: columnsettings,
edit: function(e){
//$('#grid').data('kendoGrid').dataSource.read();
console.log('an edit happened');
console.log(e);
//e.preventDefault();
},
cancel: function(e){
//$('#grid').data('kendoGrid').dataSource.read();
//$('#grid').data('kendoGrid').dataSource.sync();
console.log('cancel happened');
console.log(e);
//e.preventDefault();
$('#grid').data('kendoGrid').dataSource.read();
},
update: function(e){
console.log('an update happened');
console.log(e);
},
change: function(e){
console.log('a change happened not datasource one');
console.log(e);
},
saveChanges: function(e){
console.log('a save is about to occurr');
console.log(e);
},
// get grid state to save to DB
dataBound: function(e){
var grid = this;
var dataSource = this.dataSource;
var state = kendo.stringify({
page: dataSource.page(),
pageSize: dataSource.pageSize(),
sort: dataSource.sort(),
group: dataSource.group(),
filter: dataSource.filter()
});
}
});
function customInlineEditor(container, options){
var currentField = options.field;
var inputField;
if(options.model[currentField] === true){
inputField = $('<input type="checkbox" data-value-field="'+currentField+'" name="'+currentField+'" checked>');
}else if(options.model[currentField] === false){
inputField = $('<input type="checkbox" name="'+currentField+'">');
}else{
//inputField = "Locked";
}
container.append(inputField);
}