如何在Kendo UI ASP.NET Core Grid工具栏添加复选框或开关控件

我使用Kendo UI ASP.NET Core Grid，原本想通过t.Custom().Name("ShowActive");在工具栏添加复选框或开关控件（返回true/false来触发数据刷新），但这段代码生成的是按钮，不是预期的控件。

当前Grid后端代码：

@(Html.Kendo().Grid(Model)
    .Name("grid")
    .ToolBar(t =>
    {
        t.Excel();
        t.Pdf();
        t.Search();
        t.Custom().Name("ShowActive");
    })
    .DataSource(...
    )

对应的JS代码：

$(document).on("click", ".k-grid-ShowActive", function(e){
    $(".k-grid-search select").val(true).trigger("checkbox");
});

解决方案：自定义工具栏模板嵌入控件 #

Kendo Grid工具栏没有直接内置复选框/开关控件，需要通过.Template()自定义工具栏内容来实现，以下是两种常用方式：

方式一：添加Kendo开关（Switch）控件

替换原有的.Custom()配置，改用.Template()嵌入开关：

@(Html.Kendo().Grid(Model)
    .Name("grid")
    .ToolBar(t =>
    {
        t.Excel();
        t.Pdf();
        t.Search();
        // 自定义模板添加开关
        t.Template(@<text>
            <label class="k-label" style="margin-right: 8px; margin-left: 16px;">仅显示激活项</label>
            @(Html.Kendo().Switch()
                .Name("ShowActiveSwitch")
                .Checked(false)
                .Events(e => e.Change("onShowActiveChange"))
                .HtmlAttributes(new { style = "vertical-align: middle;" })
            )
        </text>);
    })
    .DataSource(...)
)

对应的JS事件处理，触发数据过滤刷新：

function onShowActiveChange(e) {
    const grid = $("#grid").data("kendoGrid");
    // 设置过滤条件，替换"IsActive"为你的实际激活状态字段名
    const filter = {
        logic: "eq",
        field: "IsActive",
        value: e.checked
    };
    grid.dataSource.filter(filter);
}

方式二：添加Kendo复选框（CheckBox）控件

同样用.Template()嵌入复选框：

@(Html.Kendo().Grid(Model)
    .Name("grid")
    .ToolBar(t =>
    {
        t.Excel();
        t.Pdf();
        t.Search();
        // 自定义模板添加复选框
        t.Template(@<text>
            <label class="k-checkbox-label" style="margin-left: 16px;">
                @(Html.Kendo().CheckBox()
                    .Name("ShowActiveCheckbox")
                    .Checked(false)
                    .Events(e => e.Change("onShowActiveCheckboxChange"))
                )
                仅显示激活项
            </label>
        </text>);
    })
    .DataSource(...)
)

对应的JS事件处理：

function onShowActiveCheckboxChange(e) {
    const grid = $("#grid").data("kendoGrid");
    // 设置过滤条件，替换"IsActive"为你的实际激活状态字段名
    const filter = {
        logic: "eq",
        field: "IsActive",
        value: e.checked
    };
    grid.dataSource.filter(filter);
}

关键说明 #

• .Custom()方法仅用于生成工具栏按钮，无法直接生成复选框或开关
• 通过.Template()可以完全自定义工具栏内容，直接嵌入Kendo UI的表单控件
• 利用控件的Change事件触发Grid数据源的过滤操作，Kendo会自动处理数据的GET请求和刷新

内容的提问来源于stack exchange，提问作者Demian