Why does the KendoUI Grid Transport Create event g

Question

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: "&nbsp;", width: "180px" }
    ],
    toolbar: ['create'],
    editable: 'popup',
    sortable: true,
    filterable: true,
    dataSource: _kendoDataSource
});

Answer 1

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 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.

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.

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