选中/取消选中 Telerik/Kendo Grid 复选框列中的所有项目答案

【问题标题】：Check/Uncheck all the items in a checkbox column of a Telerik/Kendo Grid选中/取消选中 Telerik/Kendo Grid 复选框列中的所有项目
【发布时间】：2020-03-18 17:06:30
【问题描述】：

我有一个三列的 Telerik 网格。我只在此处发布列声明以仅关注其中：

        .Columns(columns =>
        {
            columns.Bound(s => s.field1).Filterable(false);
            columns.Bound(s => s.field2).Filterable(false);                
            columns.Bound(s => s.BoolField).HeaderTemplate("<label><input id='selectall' class='chkbx' type='checkbox' onclick='ToggleChkBox(this.checked);'>All selected</label>")
                                        .ClientTemplate("<input type='checkbox' class='chkbxq' name='chkEnabled' <#= BoolField ? checked='checked' : '' #> 'text-align:center' onclick='onClickCheckBoxColumn()'/>")
                   .ReadOnly(false)
                   .Title("Activa")
                   .Width(40)
                   .HtmlAttributes(new { style = "text-align:center" })
                   .HeaderHtmlAttributes( new { style = "text-align:center" });                
        })

Javascript 函数：

function ToggleChkBox(flag) {
    $('.chkbxq').each(function () {            
        $(this).prop('checked', flag);
    });
}

此网格有一个复选框列。我还在列标题中放置了一个复选框。选中列标题中的此复选框时，我想选中列中的所有复选框，而未选中时，我想取消选中列中的所有复选框。上面的 ToggleChkBox 函数有效，但仅适用于网格当前页面中的项目，例如，如果网格显示第一页中的项目，则第一页中的所有项目都被选中/取消选中，但其他页面中的其余项目不被选中/未选中。那么如何从 javascript 函数中选中/取消选中所有网格页面中的所有项目？

【问题讨论】：

标签： kendo-ui kendo-grid kendo-asp.net-mvc telerik-grid telerik-mvc

【解决方案1】：

看起来您正在尝试做一些 Kendo 已经内置支持的事情。您是否尝试过使用 column.Select()？

这是 Kendo 的网格中复选框的演示：

https://demos.telerik.com/aspnet-mvc/grid/checkbox-selection

【讨论】：

【解决方案2】：

您可以使用内置复选框选择而不是使用客户端模板，并且可以通过添加以下行来启用它

 columns.Select().Width(50); //which will show checkbox with select all option
 columns.Bound(s => s.field1).Filterable(false);
 columns.Bound(s => s.field2).Filterable(false);

为此，您必须启用选择选项为multiple，如下所示

.Selectable(selectable =>
{
     selectable.Mode(Kendo.Mvc.UI.GridSelectionMode.Multiple);
     selectable.Type(Kendo.Mvc.UI.GridSelectionType.Row);
})

【讨论】：