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.
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?
Regards,
Scott
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
});