6

KendoUI 2013.1.319 でグリッド内のレコードを編集し、編集ダイアログの [更新] ボタンを押すと、Update イベントではなく Transport Create イベントが実際に発生することを示すフィドルをまとめました。レコードごとに 1 回。

次のフィドルを開き、グリッドの最初のレコードで [編集] ボタンを押してから、編集ダイアログの [更新] ボタンを押して、コンソール ウィンドウを確認すると、発生したイベントとレコード ID がログに記録されていることがわかります。それがイベントに渡されました。

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

なぜこれが起こっているのですか?どうすれば修正できますか?

よろしく、

スコット

StackOverflow をハッピーに保つためのコード:

<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
});
4

1 に答える 1

9

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/

于 2013-05-21T06:58:38.217 に答える