为什么即使操作是“更新"，KendoUI Grid Transport Create事件也会多次引发? [英] Why does the KendoUI Grid Transport Create event gets raised multiple times, and even when the action is Update?
问题描述
我整理了一个小提琴，以证明在KendoUI 2013.1.319中，当在网格中编辑记录并按编辑对话框上的更新"按钮时，它实际上引发了Transport Create事件，而不是Update事件，并为每条记录提高一次.
I have put together a fiddle that demonstrates that in the KendoUI 2013.1.319, when editing a record in the grid and press the Update button on the edit dialogue, it actually raises the Transport Create event, instead of the Update event, and it raises it once for each record.
打开以下小提琴，然后在网格中的第一条记录上按编辑"按钮，然后在编辑对话框中按更新"按钮，并在控制台窗口中进行查看，您将看到我已记录引发的事件并传递给事件的记录ID.
Open the following fiddle and press the Edit button on the first record in the grid, and then press the Update button on the edit dialogue, and have a look in the console window and you will see I have logged the event raised and the record id that was passed to the event.
http://jsfiddle.net/codeowl/fakDC/
为什么会这样，怎么解决?
Why is this happening, and how do I fix it?
此致
斯科特
使StackOverflow开心的代码:
Code to keep StackOverflow Happy:
<div id="TestGrid"></div>
var _Data = [{ "SL_TestData_ID": "1", "SL_TestData_Number": "1", "SL_TestData_String": "Test", "SL_TestData_Date": "1971-12-19", "SL_TestData_DateTime": "1971-12-19 12:00:00", "SL_TestData_Time": "00:30:00", "SL_TestData_Boolean": "1" }, { "SL_TestData_ID": "2", "SL_TestData_Number": "22", "SL_TestData_String": "Test 2", "SL_TestData_Date": "2013-05-01", "SL_TestData_DateTime": "2013-05-01 03:05:22", "SL_TestData_Time": null, "SL_TestData_Boolean": "1" }, { "SL_TestData_ID": "3", "SL_TestData_Number": "55", "SL_TestData_String": "Test 3", "SL_TestData_Date": "2013-05-02", "SL_TestData_DateTime": "2013-05-02 05:33:45", "SL_TestData_Time": null, "SL_TestData_Boolean": "0" }, { "SL_TestData_ID": "10", "SL_TestData_Number": "1", "SL_TestData_String": "Test12", "SL_TestData_Date": "1971-12-19", "SL_TestData_DateTime": "1971-12-19 12:00:00", "SL_TestData_Time": "00:30:00", "SL_TestData_Boolean": "1" }];
var _kendoDataSource = new kendo.data.DataSource({
transport: {
read: function (options) {
console.log('Transport READ Event Raised');
options.success(_Data);
},
create: function (options) {
console.log('Transport CREATE Event Raised - Record ID: ' + options.data.SL_TestData_ID);
_Data.push(options.data);
options.success(options.data);
},
update: function (options) {
console.log('Transport UPDATE Event Raised - Record ID: ' + options.data.SL_TestData_ID);
var objRecord = $.grep(_Data, function (e) { return e.SL_TestData_ID == options.data.SL_TestData_ID; });
_Data[_Data.indexOf(objRecord)] = options.data;
options.success(options.data);
},
destroy: function (options) {
console.log('Transport DESTROY Event Raised');
_Data.splice(_Data.indexOf(options.data), 1);
options.success(options.data);
}
},
serverPaging: true,
serverFiltering: true,
serverSorting: true,
sortable: {
mode: 'multiple',
allowUnsort: true
},
pageable: {
buttonCount: 5
},
schema: {
model: {
id: "Users_ID",
fields: {
SL_TestData_ID: { editable: false, nullable: false, defaultValue: 0 },
SL_TestData_Number: { type: "int", validation: { required: true, defaultValue: 0 } },
SL_TestData_String: { type: "string", validation: { required: true } },
SL_TestData_Date: { type: "date", validation: { required: true } },
SL_TestData_DateTime: { type: "date", validation: { required: true } },
SL_TestData_Time: { type: "date", validation: { required: true } },
SL_TestData_Boolean: { type: "bool", validation: { required: true, defaultValue: false } }
}
}
},
error: function (a) {
$('#TestGrid').data("kendoGrid").cancelChanges();
}
});
function dateTimeEditor(container, options) {
$('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
.appendTo(container)
.kendoDateTimePicker({});
}
function timeEditor(container, options) {
$('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
.appendTo(container)
.kendoTimePicker({});
}
// Initialize Grid
$("#TestGrid").kendoGrid({
columns: [
{ field: "SL_TestData_ID", title: "ID" },
{ field: "SL_TestData_Number", title: "Number" },
{ field: "SL_TestData_String", title: "String" },
{
field: "SL_TestData_Date",
title: "Date",
format: "{0:MM/dd/yyyy}"
},
{
field: "SL_TestData_DateTime",
title: "Date Time",
format: "{0:MM/dd/yyyy HH:mm tt}",
editor: dateTimeEditor,
filterable: {
ui: "datetimepicker"
}
},
{
field: "SL_TestData_Time",
title: "Time",
format: "{0:HH:mm tt}",
editor: timeEditor,
filterable: {
ui: "timepicker"
}
},
{ field: "SL_TestData_Boolean", title: "Boolean" },
{ command: ["edit", "destroy"], title: " ", width: "180px" }
],
toolbar: ['create'],
editable: 'popup',
sortable: true,
filterable: true,
dataSource: _kendoDataSource
});
推荐答案
问题是，在model中，您将Users_ID定义为id，但是没有这样的字段，因此对于Kendo UI而言，它是未定义的，这意味着那是新的.
The problem is that in model you define Users_ID as the id but there is no such field so for Kendo UI it is undefined which means that is new.
id. Kendo UI使用它(与dirty结合使用)来知道是否需要将其发送到服务器.
id is mandatory whenever you have a grid that is editable. Kendo UI uses it (in combination with dirty) to know if it needs to be sent to the server.
如果将id定义为SL_TestData_ID(不确定是否相同，是否可以这样做)，则会看到它只会将实际修改或创建的数据发送到服务器.
If you define id as SL_TestData_ID (not sure if the are the same and you could do it) you see that then it only sends to the server the data actually modified or created.
您的小提琴在这里进行了修改 http://jsfiddle.net/fakDC/3/
Your fiddle modified here http://jsfiddle.net/fakDC/3/
这篇关于为什么即使操作是“更新"，KendoUI Grid Transport Create事件也会多次引发?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
