我有一个在本地加载数据源的网格（不使用传输）。我能够创建一个自定义编辑器，当用户单击“编辑”按钮时，该编辑器会在一行中添加复选框。无法使用默认编辑器，因为我必须进行每个字段检查以查看用户是否有权更改字段。
单击“编辑”按钮可以完成我的预期，它会显示复选框。但是，在更改数据并单击“更新”按钮时，该行将删除。或者，当处于“编辑”模式并且用户单击另一行中的另一个“编辑”按钮时，原始行将删除或控制有关空数据的错误。
更新事件似乎永远不会触发，以便我可以手动处理更新数据源。
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);
}
答案 0 :(得分：3)
没有定义传输的Kendo Grid旨在“显示”数据，而不是编辑它。你可以做什么，而不是使用事件处理程序来处理“保存”，“更新”，“编辑”等事件，将传输操作声明为函数。
var data = [
{ Id: 1, Name: "Decision 1", Position: 1 },
{ Id: 2, Name: "Decision 2", Position: 2 },
{ Id: 3, Name: "Decision 3", Position: 3 }
];
var dataSource = new kendo.data.DataSource({
//data: data,
transport: {
read: function(e) {
e.success(data);
},
update: function(e) {
e.success();
},
create: function(e) {
var item = e.data;
item.Id = data.length + 1;
e.success(item);
}
},
Here是一个应该正常工作的例子。
答案 1 :(得分：1)
尽管这在游戏中已经很晚了，但我认为看到整个数据源会让其他人受益。
与一些与剑道相关的文档存在的一个问题是，有些示例不够深入并且反映了实际的实际实现。
return new kendo.data.DataSource({
type: "odata",
transport: {
read:
function (options) {
var odataParams = kendo.data.transports["odata"].parameterMap(options.data, "read");
dataFactory.getList(odataParams)
.success(function (result) {
options.success(result);
})
.error(function (error) {
console.log("data error");
});
//$http({
// url: crudServiceBaseUrl,
// method: 'GET',
// params: odataParams
//})
//.success(function (result) {
// options.success(result);
//});
},
//{
// url: crudServiceBaseUrl,
// dataType: "json"
//},
// {function (options) {
// //var odataParams = kendo.data.transports["odata"].parameterMap(options.data, "read"); // "{"take":"10","skip":"0","page":"1","pageSize":"10"}"
// (new abstractFactory2().query({ odataUrl: crudServiceBaseUrl })).$getAll()
// .then(function (data) {
// return options.success(data);
// });
//var odataParams = kendo.data.transports["odata"].parameterMap(options.data, "read"); // "{"take":"10","skip":"0","page":"1","pageSize":"10"}"
//contentTypeFactory.getList()
// .success(function (data) {
// return options.success(data);
// })
// .error(function (error) {
// console.log(error);
// });
//},
update:
function (options) {
//var odataParams = kendo.data.transports["odata"].parameterMap(options.data, "update");
var data = options.data;
dataFactory.update(data.ContentTypeId, data)
.success(function (result) {
// call standard error message function
customFunctions.showConfirmation();
options.success(result);
})
.error(function (error) {
customFunctions.showError("Update Failed"); // use default error message
console.log("data error");
});
//{ // PUT
//url: function (data) {
// console.log(data);
// dataType: "json"
// return crudServiceBaseUrl + "(" + data.ContentTypeId + ")";
//},
//error: function (e) {
// console.log("error: " + e);
//}
},
create:
function (options) {
var data = options.data;
data.ContentTypeId = "0"; // required for valid field data
dataFactory.insert(data)
.success(function (result) {
options.success(result);
})
.error(function (error) {
customFunctions.showError("Create Failed"); // use default error message
});
//{ // POST
//data: function (data) {
// // reformat the data to match the DTO
// data.ContentTypeId = "0";
// data.NumberOfContentTypes = "0";
// //data.msrepl_tran_version = "00000000-0000-0000-0000-000000000000";
// return data;
//},
//url: function (data) {
// console.log(data);
// return crudServiceBaseUrl;
//},
//error: function (e) {
// console.log("create error: " + e);
//},
//dataType: "json",
},
destroy:
function (options) {
var data = options.data;
dataFactory.remove(data.ContentTypeId)
.success(function (result) {
options.success(result);
})
.error(function (error) {
console.log("data error");
});
//{
//url: function (data) {
// dataType: "json";
// return crudServiceBaseUrl + "(" + data.ContentTypeId + ")";
//},
//success: function (e) {
// console.log("success");
//},
//error: function (e) {
// console.log(e);
//}
},
parameterMap: function (options, type) {
// this is optional - if we need to remove any parameters (due to partial OData support in WebAPI
if (operation !== "read" && options.models) {
return JSON.stringify({ models: options });
}
//var parameterMap = kendo.data.transports.odata.parameterMap(options);
//delete parameterMap.$inlinecount; // remove inlinecount parameter
//delete parameterMap.$format; // remove format parameter
//return parameterMap;
},
},
batch: false,
pageSize: 10,
serverPaging: true,
change: function (e) {
console.log("change: " + e.action);
// do something with e
},
schema: {
data: function (data) {
//console.log(data)
return data.value;
},
total: function (data) {
console.log("count: " + data["odata.count"]);
return data["odata.count"];
},
model: {
id: "ContentTypeId",
fields: {
ContentTypeId: { editable: false, nullable: true },
//UserId: {editable: false, nullable: false },
Description: { type: "string", validation: { required: true } },
//msrepl_tran_version: { type: "string", validation: { required: true } }
}
}
},
error: function (e) {
//var response = JSON.parse(e.responseText);
var response = e.status;
console.log(response);
}
}) // dataSource
这是完整的KendoUI OData数据源，并且最初使用默认的KendoUI处理方式（在不同的传输部分中注释掉了部分 - 留待参考）。这有什么不同之处在于它暴露了Kendo选项并将它们存储在odataParams中，然后将它们传递给处理通信的AngularJS factory provider。
记下parameterMap:部分，并在那里设置一个断点，以查看那里的内容，以供参考。
还有一些额外的调试console.log()。
希望这是有益的。