剑道网格在更新时表现得很奇怪

Question

我有一个动作奇怪的剑道网格。我正在尝试在数据源中选择一行并更新值。网格有 2 行：一个模板，即复选框和数据源中的一个布尔值。

我想做的只是：

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

下面的代码可以正常工作，但只有在每个复选框至少被点击一次后才能工作。

复制：点击任何复选框，您会看到行中的值得到更新，但复选框未被选中。再次单击它，您将看到复选框被选中并且行被选中。但从来没有第一次。所有行也是如此。在第 2 次运行后，它们工作正常，但一开始就不行。

这里是Telerik fiddle link 玩

$("#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);
});