Question

我有一个令人毛骨悚然的剑道网格。我正在尝试选择一行并更新数据源中的值。网格有2行：一个模板，即复选框和数据源中的一个值，即布尔值。

我所要做的就是：

单击复选框时 - 更新数据中IsChecked的值来源并将该行标记为选中

下面的代码运行正常，但只有在每个复选框至少点击一次后。

要复制：单击任何复选框，您将看到行中的值得到更新，但未选中复选框。再次单击它，您将看到复选框被选中并且行被选中。但从来没有第一次。所有行都是如此。第二次运行后，它们工作正常，但最初没有。

$("#grid").kendoGrid({
  columns: [
    {
         title: "Check",
         template: '<input class="checkbox" type="checkbox" />'
    },

     { field: "IsChecked" }
  ],
  dataSource: [
    {  IsChecked:false},
     {  IsChecked:false },
     {  IsChecked:false },
     {  IsChecked:false }
  ],
   dataBound: function () {
                    $(".checkbox").bind("change", function (e) {

                        var row =  $(e.target).closest("tr");
                        row.toggleClass("k-state-selected");

                        var grid = $("#grid").data("kendoGrid");
                        var index = $("tr", grid.tbody).index(row);

                        var data = grid.dataSource.at(index);
                        data.set("IsChecked", true);


                    });
                }
});

谢谢

Answer 1

尝试以下代码。工作小提琴http://dojo.telerik.com/UNIpU/3

$("#grid").kendoGrid({
    columns: [{
            title: "Check",
            template: '<input class="checkbox"  #= IsChecked ? \'checked="checked"\' : "" #  type="checkbox" />'
        },

        {
            field: "IsChecked"
        }
    ],
    dataSource: [{
        IsChecked: false
    }, {
        IsChecked: false
    }, {
        IsChecked: false
    }, {
        IsChecked: false
    }],
    dataBound: function(e) {
        var grid = e.sender;
        var data = grid._data;

        data.forEach(function(entry) {
            if (entry.IsChecked) {
                $('tr[data-uid="' + entry.uid + '"]').addClass("k-state-selected");
            } else {
                $('tr[data-uid="' + entry.uid + '"]').removeClass("k-state-selected");
            }
        })
    }

});

$("#grid .k-grid-content").on("change", "input.checkbox", function(e) {
    var grid = $("#grid").data("kendoGrid"),
        dataItem = grid.dataItem($(e.target).closest("tr"));

    dataItem.set("IsChecked", this.checked);
});

Kendo Grid在更新时表现得很奇怪

1 个答案: