如何在Kendo UI MVC的MultiSelect下拉组件中实现全选功能

你现有的Razor代码已经完成了组件基础配置、全选复选框头部模板的定义，补充以下JS交互逻辑即可实现完整的全选/取消全选功能。

现有Razor代码（已校验可用） #

@(Html.Kendo().MultiSelect()
        .HeaderTemplate("<label><input type=\"checkbox\" id=\"selectAll\"> select all </label>")
        .Name("schoolNames")
        .Filter("Contains")
        .HtmlAttributes(new {style = "width: 100%;"})
        .DataTextField("title")
        .DataValueField("id")
        .AutoClose(false)
        .Events(e => e.Change("selectAllChange"))
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Url( "/api/v1/Moodle/names/");
            })
                .ServerFiltering(false);
        })
)

补充JS交互逻辑 #

// 绑定全选复选框点击事件
$(document).on('click', '#selectAll', function () {
    const multiSelect = $("#schoolNames").data("kendoMultiSelect");
    // 取所有选项的value值
    const allOptionValues = multiSelect.dataSource.data().map(item => item.id);

    if ($(this).is(":checked")) {
        multiSelect.value(allOptionValues);
    } else {
        multiSelect.value([]);
    }
    // 手动触发change事件，保证原有业务逻辑正常执行
    multiSelect.trigger("change");
})

// 多选组件值变更时同步全选框状态
function selectAllChange() {
    const multiSelect = $("#schoolNames").data("kendoMultiSelect");
    const totalOptionCount = multiSelect.dataSource.data().length;
    const selectedOptionCount = multiSelect.value().length;
    $("#selectAll").prop("checked", totalOptionCount === selectedOptionCount);
}

功能适配说明 #

• 如果你开启过滤后希望全选仅选中当前过滤后的结果，只需将multiSelect.dataSource.data()替换为multiSelect.dataSource.view()即可
• 若数据量超过500条，建议开启组件虚拟滚动配置，避免全选时出现渲染卡顿
• AutoClose(false)配置必须保留，防止点击全选后下拉框自动关闭影响操作

内容的提问来源于stack exchange，提问作者M.imp