Kendo Grid在更新时表现怪异

Kendo Grid Acting Weird on Update

本文关键字：Grid 更新 Kendo      更新时间：2023-09-26

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

我想做的就是：

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

下面的代码运行良好，但只有在每个复选框至少单击一次之后。

要复制：单击任何复选框，您将看到行中的值得到更新，但复选框未选中。再次单击它，您将看到复选框被选中，行被选中。但从来没有第一次。所有的行也是如此。第二次跑步后，他们表现良好，但一开始就不好了。

这是围绕播放的Telerik小提琴链接

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

                    });
                }
});

感谢

请尝试以下代码。工作小提琴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);
});
相关文章：