Kendo UI Grid问题与命令按钮和服务器排序

Question

我使用ASP.net MVC4。

我用odata数据源创建了一个简单的Kendo UI Web网格。 我还添加了2个命令按钮：编辑和删除每一行。

如果我对cols进行排序，并且如果单击编辑按钮：kendo数据项返回排序前相同行的项目。

这对我来说是个大问题，因为可以编辑或删除错误的行。

Answer 1

此添加到一个场（在此示例中，AddressLabel）：

template: "<span class='dataId value' data-id='#= Id #'>#= AddressLabel #</span>" 

---

$.fn.GridRowClick = function (evt, ui) { 
evt.preventDefault(); 
//var dataItem = this.dataItem($(evt.currentTarget).closest("tr")); 
var realId = $(evt.currentTarget).closest("tr").find(".dataId").data("id"); 
alert(realId); 
} 

Answer 2

$.fn.BuildGrid = function(){ 
    var datasource = new kendo.data.DataSource({ 
    type: "odata", 
    serverPaging: true, 
    serverSorting: true, 
    pageSize: 10, 
    transport: 
    { 
     read: 
     { 
      url: "/odata/contactaddresses?$filter=FK_User eq guid'" + UserId + "'", 
      dataType: "json", 
      cache: false 
     } 
    }, 
    schema: 
    { 
     data: function (data) { 
      return data["value"]; 
     }, 
     total: function (data) { 
      return data["odata.count"]; 
     }, 
     model: { 
      fields: { 
       Id: { type: "number" }, 
       AddressLabel: { type: "string" }, 
       Town: { type: "string" }, 
       Country: { type: "string" }, 
       TimeZone: { type: "string" }, 
       UTCOffset: { type: "string" }, 
       UTCOffsetDST: { type: "string" }, 
       isCorrespondence: { 
        type: "boolean", 
        parse: $.fn.kenduUINullableBoolColumnParser, 
        nullable: true 
       }, 
       isDelivery: { 
        type: "boolean", 
        parse: $.fn.kenduUINullableBoolColumnParser, 
        nullable: true 
       }, 
       isBilling: { 
        type: "boolean", 
        parse: $.fn.kenduUINullableBoolColumnParser, 
        nullable: true 
       } 
      } 
     } 
    } 
}); 

var grid = { 
    dataSource: datasource, 

    filterable: true, 
    sortable: true, 
    pageable: { messages: { display: "{0:d0} - {1:d0}/{2:d0} elements" } }, 
    columns: [ 
     { 
      field: "Id", 
      filterable: false, 
      hidden: true 
     }, 
     { 
      field: "AddressLabel", 
      title: "Address Label", 
      filterable: true, 
      width: 130 
     }, 
     { 
      field: "Town", 
      title: "Town", 
      filterable: true, 
      width: 100 
     }, 
     { 
      field: "Country", 
      title: "Country", 
      filterable: true, 
      width: 100 
     }, 
     { 
      field: "TimeZone", 
      title: "Time zone", 
      filterable: true, 
      width: 50 
     }, 
     { 
      field: "UTCoffset", 
      title: "UTC offset", 
      filterable: true, 
      width: 50 
     }, 
     { 
      field: "UTC_DST_offset", 
      title: "UTC DST offset", 
      filterable: true, 
      width: 50 
     }, 
     { 
      field: "isCorrespondence", 
      title: "Corr.", 
      filterable: true, 
      width: 50 
     }, 
     { 
      field: "isBilling", 
      title: "Bill.", 
      filterable: true, 
      width: 50 
     }, 
     { 
      field: "isDelivery", 
      title: "Deliv.", 
      filterable: true, 
      width: 50 
     }, 
     { 
      field: "SortIndex", 
      title: "Ordr.", 
      filterable: false, 
      width: 45 
     }, 
     { 
      command: { 
       name: "edt", 
       click: $.fn.GridRowClick 
      }, 
      title: "", 
      width: 85 
     } 
    ] 
}; 
$("#Grid").css("overflow", "hidden"); 
$("#Grid").kendoGrid(grid); 
} 
$.fn.GridRowClick = function (evt, ui) { 
    evt.preventDefault(); 
    var dataItem = this.dataItem($(evt.currentTarget).closest("tr")); 
    alert(dataItem.Id); 
}