Why is the KendoUI Grid Transport Create event raised several times, and even when the action is an update?

I put together a fiddle that demonstrates that in KendoUI 2013.1.319, when editing a record in the grid and clicking the Refresh button in the edit dialog box, it actually triggers the Create Transport event, instead of the Update event, and it raises it once for each entry.

Open the following script and click the โ€œEditโ€ button in the first record in the grid, and then click the โ€œRefreshโ€ button in the edit dialog and look in the console window and you will see that I registered the raised event and the identifier of the record that was transmitted to the event.

http://jsfiddle.net/codeowl/fakDC/

Why is this happening and how to fix it?

Hello,

Scott

Code to save 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: "&nbsp;", width: "180px" } ], toolbar: ['create'], editable: 'popup', sortable: true, filterable: true, dataSource: _kendoDataSource }); 
+6
source share
1 answer

The problem is that in model you define Users_ID as id , but there is no such field, so for the Kendo user interface it is undefined, which means that it is new.

id is required if you have an editable grid. Kendo's user interface uses it (in combination with dirty ) to find out if it needs to be sent to the server.

If you define id as SL_TestData_ID (not sure if they are the same, and you could do it), you will see that then it sends to the server the actually changed or created data.

Your fiddle changed here http://jsfiddle.net/fakDC/3/

+9
source

Source: https://habr.com/ru/post/945472/


All Articles