jquery - コマンド ボタンとサーバー ソートに関する剣道 UI グリッドの問題

Question

私は ASP.net MVC4 を使用しています。

odata データソースを使用して単純な Kendo UI Web グリッドを作成しました。また、2 つのコマンド ボタンを追加しました。各行の編集と削除です。

列を並べ替えて編集ボタンをクリックすると、剣道データ項目は並べ替え前の同じ行の項目を返します。

間違った行が編集または削除される可能性があるため、これは私にとって大きな問題です。

Answer 1

$.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);
}