如何限制Kendo Grid(Asp.Net Mvc)多选的最大行数（最多10行）？

我明白你现在的需求——已经开启了Kendo Grid的多选模式，但需要限制用户最多选中10个任务。确实Kendo Grid本身没有直接的配置项来做这个，不过我们可以通过JavaScript事件来实现这个功能，下面给你两种实用的方案：

方案一：利用Grid的change事件实时校验 #

这个方案会在用户选中/取消选中行的时候，实时检查选中行数，超过限制时自动取消最新的选中操作，还可以给用户提示。

首先，先在你的Grid配置里添加Change事件绑定：

@(Html.Kendo().Grid<TaskModel>()
    .Name("TaskModelGrid")
    .Selectable(s => s.Mode(GridSelectionMode.Multiple))
    .Events(e => e.Change("onGridChange")) // 新增事件绑定
    .Columns(columns => {
        columns.Bound(c => c.TaskName);
        // 其他列配置...
    })
    .HtmlAttributes(new { style = "height: 550px;" })
    .Scrollable()
    .Groupable()
    .Sortable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("GetUsersTask", "TaskController"))
        .PageSize(20)
    )
)

然后在页面的<script>标签里添加事件处理函数：

function onGridChange(e) {
    var grid = this;
    var selectedRows = grid.select();
    var maxSelectCount = 10;

    // 如果选中行数超过限制
    if (selectedRows.length > maxSelectCount) {
        // 获取最后选中的那一行（最新操作）
        var lastSelectedRow = selectedRows.last();
        // 取消该行选中状态
        grid.clearSelection(lastSelectedRow);
        
        // 可选：给用户友好提示
        kendo.alert("最多只能选择10个任务哦！");
        // 也可以用Kendo Notification组件做更美观的提示
        // $("#notification").data("kendoNotification").show("最多只能选择10个任务哦！", "error");
    }
}

方案二：处理表头全选框的特殊情况 #

如果你的Grid有表头全选复选框，上面的方案在用户点击全选时会取消超出的行，但体验不够直观。我们可以额外监听全选框的点击事件，直接限制最多选中10行：

$(document).ready(function() {
    var grid = $("#TaskModelGrid").data("kendoGrid");
    var maxSelectCount = 10;

    // 监听表头全选复选框点击
    grid.table.find(".k-select-all").click(function(e) {
        e.stopPropagation();
        var checkBox = $(this);
        
        // 如果是勾选全选操作
        if (checkBox.is(":checked")) {
            var allRows = grid.table.find("tbody tr");
            // 只选中前10行
            grid.select(allRows.slice(0, maxSelectCount));
            // 取消全选框的勾选（因为并未真的全选）
            checkBox.prop("checked", false);
            kendo.alert("最多只能选择10个任务，已自动选中前10条！");
        } else {
            // 取消全选时正常清空选中状态
            grid.clearSelection();
        }
    });
});

补充说明 #

• 两种方案可以结合使用，既处理单行选中场景，也覆盖全选的特殊情况
• 可以根据需求调整maxSelectCount的值，当前设置为10符合你的需求
• 提示方式可以根据项目UI风格选择，Kendo Notification比原生alert更美观统一

内容的提问来源于stack exchange，提问作者Murat Gündeş