Question

我正在使用MVC kendo网格，我正在尝试向标题添加select all / deselect复选框。我有javascript做的选择＆amp;的逻辑取消选中所有单独的复选框。我还想根据行中的复选框选中/取消选中标题复选框。由于在网格初始化期间网格行未知，因此我们无法将click事件附加到行中的各个复选框。数据绑定到网格后我们必须这样做。我还想在用户浏览页面或进行排序时保持复选框的状态。（因为这种分页和排序是在客户端完成的。服务器操作设置为false） javascript工作正常。我正在通过telerik支持建议here在网格的dataBound事件中调用此javascript。但是，dataBound事件在每次页面更改和排序时都会被触发。根据文档here，当widget被绑定到dataSource时，它应该被触发。所以我尝试了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")))

    )

Answer 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.
    }
}

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

剑道网格的dataBound事件会在每个页面更改时被触发。分类

1 个答案: