每次页面更改和排序都会触发 Kendo 网格的 dataBound 事件

Posted 2023-05-07

【中文标题】每次页面更改和排序都会触发 Kendo 网格的 dataBound 事件

【英文标题】：Kendo grid's dataBound event gets fired on each page change & sort

【发布时间】：2015-09-17 19:44:25

【问题描述】：

我正在使用 MVC 剑道网格，我正在尝试将全选/取消选择复选框添加到标题中。我有 javascript，它执行选择和取消选择所有单个复选框的逻辑。 我还想根据行中的复选框选择/取消选择标题复选框。由于在网格初始化期间网格行是未知的，我们不能将点击事件附加到行中的各个复选框。在数据绑定到网格之后，我们必须这样做。当用户浏览页面或进行排序时，我还想保持复选框的状态。 （因为这个分页和排序是在客户端完成的。服务器操作设置为 false） javascript 工作正常。我在网格的 dataBound 事件中调用这个 javascript，正如 Telerik 支持建议的 here。 但是，每次页面更改和排序都会触发 dataBound 事件。根据文档here，它应该在小部件绑定到数据源时被触发。 所以我尝试了 dataSource 的 requestEnd 事件，但 requestEnd 事件也会在每次页面更改和排序时被触发。再次，根据文档here，它应该只在远程服务请求完成时才会触发。

那么我应该使用哪个事件来调用 javascript，以便 javascript 只执行一次，或者有其他方法可以做到这一点。

$(function () 
    $gridElement = $("#grid");
    var kendoGrid = $gridElement.data("kendoGrid");
    var dataSource = kendoGrid.dataSource;

    kendoGrid.bind("dataBound", function (e)           
          configureSelectCheckBoxes($gridElement)
     
  )

   $("#btnSearch").click(function () 
        kendoGrid.dataSource.read();
        kendoGrid.refresh();
        kendoGrid.dataSource.page(1);
    )


    function configureSelectCheckBoxes(grid) 
        // attach click event to select all check box
        grid.find("thead input:checkbox").click(
            function () 
                grid.find("td input:checkbox").prop("checked", $(this).prop("checked"));
        );

        // attach click event to individual check box
         grid.find("tbody input:checkbox").click(function () 
                  var checkedCount = grid.find("td input:checkbox:checked").length;
                  var totalCount = grid.find("td input:checkbox").length;
                  grid.find("th input:checkbox").prop("checked", checkedCount === totalCount);
           
    );

)

 @(html.Kendo().Grid<MVCPOC.Models.MyModel>()
        .Name("grid")
        .Columns(col =>
        
            col.Bound(p => p.ModelID)
                .ClientTemplate("<input class='chkbox' type='checkbox' value='#=ModelID#' />")
                .HeaderTemplate("<input type='checkbox' id='selectAll' />")
                .Width(30)
                .Sortable(false)
                .Filterable(false);                
            col.Bound(p => p.StateProvinceCode);                
            col.Bound(p => p.EmailAddress);
        )
        .AutoBind(false)
        .Pageable()
        .Sortable()
        .Scrollable(x => x.Height(300))
        .HtmlAttributes(new  style = "height:500px" )
        .DataSource(dataSource => dataSource
            .Ajax()
            .ServerOperation(false)
            .PageSize(20)
            .Read(read => read
                .Action("GetData", "Grid")))

    )

【问题讨论】：

它应该确实有效。您是否尝试过在小部件代码中指定事件？ .Event(e=>e.OnDataBound("configureSelectCheckBoxes"))

@Vanice 我没有尝试过，我将任何 javascript 与 cshtml 视图分开。所以我在小部件初始化后将数据绑定事件附加到 .js 文件中。

你可以考虑它的可读性。当我查看小部件代码时，我喜欢查看所有事件。实际代码可以在 .js 文件本身中。你能提供一个小提琴或演示项目吗？

【参考方案1】：

我从您的问题中了解到，您需要在排序时停止数据绑定事件。如果我理解正确，那么以下技巧将对您有用。

您只需要检查如下数据源的 sort()（其 JS 解决方案仅显示 Trick）：

dataBound: function (e) 
    if (e.sender.dataSource.sort() == undefined) 
           // It indicates that grid is loaded first time, no sort trigger is fired.
    

注意：如果您设置了默认列进行排序，那么您需要相应地添加条件以检查该列的排序，因为条件可能不正确。