KendoUI Grid取消已勾选/选中行功能实现咨询

嗨，这个需求很容易实现，咱们一步步来搞定它：

1. 配置工具栏取消按钮（如果还没添加的话） #

首先确保你的Grid工具栏里包含这个取消按钮，在Grid的初始化配置中补充toolbar项：

$("#yourGridId").kendoGrid({
    // 其他已有配置（比如columns、dataSource、dataBound等）
    toolbar: [
        // 你的其他工具栏按钮，比如"create"、"excel"等
        { name: "cancelSelection", text: "取消所有选择" }
    ]
});

2. 绑定取消按钮的点击事件 #

接下来给这个按钮绑定点击处理函数，完成三个核心操作：更新数据项的选中状态、移除行的选中样式、同步复选框UI：

// 给取消按钮绑定点击事件
$(document).on("click", ".k-grid-cancelSelection", function() {
    // 获取Grid实例
    const grid = $("#yourGridId").data("kendoGrid");
    if (!grid) return;

    // 1. 更新所有数据项的IsChecked属性（用set方法触发Observable变更通知）
    const allDataItems = grid.dataSource.data();
    allDataItems.forEach(item => {
        item.set("IsChecked", false);
    });

    // 2. 移除所有行的选中样式，和你dataBound事件里的逻辑保持一致
    grid.items().removeClass("k-state-selected");

    // 可选：保险起见，手动同步复选框状态（一般用set方法会自动触发绑定更新）
    grid.items().find(".checkbox").prop("checked", false);
});

关键细节说明 #

• 为什么用item.set("IsChecked", false)而不是直接赋值？因为Kendo UI的DataSource数据项是ObservableObject，使用set方法会触发属性变更事件，这样你之前通过kendo.bind绑定的复选框会自动同步状态，不用额外手动操作DOM。
• 如果你的Grid开启了分页：
  • 本地数据：grid.dataSource.data()会返回所有本地数据，直接遍历即可清空所有选中状态
  • 远程数据：需要在后端重置对应记录的IsChecked状态，再重新加载Grid数据

这样就能完美实现点击取消按钮清空所有已勾选/选中行的需求啦。

内容的提问来源于stack exchange，提问作者nineveh.Y