Tại sao sự kiện Tạo giao diện lưới KendoUI được tăng lên nhiều lần và ngay cả khi hành động là Cập nhật?

Question

Tôi đã đặt cùng một fiddle thể hiện rằng trong KendoUI 2013.1.319, khi chỉnh sửa bản ghi trong lưới và nhấn nút Cập nhật trên hộp thoại chỉnh sửa, nó thực sự làm tăng sự kiện Transport Create, thay vì sự kiện Cập nhật và nó tăng lên một lần cho mỗi bản ghi.

Mở fiddle sau và nhấn nút Chỉnh sửa trên bản ghi đầu tiên trong lưới, sau đó nhấn nút Cập nhật trên hộp thoại chỉnh sửa và xem trong cửa sổ bảng điều khiển và bạn sẽ thấy tôi đã ghi sự kiện và id bản ghi đã được chuyển đến sự kiện.

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

Tại sao điều này xảy ra và cách khắc phục?

Kính trọng,

Scott

Mã để giữ StackOverflow Chúc mừng:

<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

Vấn đề là ở model bạn xác định Users_ID như id nhưng không có trường như vậy để cho Kendo UI nó không xác định nghĩa là mới.

id là bắt buộc bất cứ khi nào bạn có lưới là editable. Kendo UI sử dụng nó (kết hợp với dirty) để biết nếu nó cần phải được gửi đến máy chủ.

Nếu bạn xác định id là SL_TestData_ID (không chắc chắn nếu giống nhau và bạn có thể làm điều đó), bạn sẽ thấy nó chỉ gửi đến máy chủ dữ liệu thực sự được sửa đổi hoặc tạo.

Fiddle của bạn được sửa đổi tại đây http://jsfiddle.net/fakDC/3/