Kendo Grid中基于条件控制行选择的实现指南

本教程详细阐述了如何在Kendo Grid中实现基于特定条件的行选择控制。针对Kendo Grid默认选择行为难以干预的挑战，文章提出了一种有效的解决方案：利用dataBound事件动态绑定点击事件到选择框，并通过e.stopImmediatePropagation()阻止不符合条件的行被选中，同时确保UI和内部选择状态的一致性。

1. Kendo Grid条件行选择的挑战

在asp.net mvc项目中，当使用kendo ui grid并包含一个选择列（select column）时，开发者经常需要根据特定业务逻辑阻止用户选择某些行。例如，如果某行的状态为“已停产”，则不允许用户选中该行。

初次尝试时，许多开发者可能会想到在Kendo Grid的change事件中处理此逻辑。然而，仅仅在change事件中通过JavaScript代码取消选中复选框，通常只能改变UI显示，而无法同步更新Kendo Grid内部的选中状态（如this.select()、this.selectedKeyNames()）。这是因为change事件在Kendo Grid完成其内部选择逻辑之后才触发，此时尝试阻止或回滚选择往往为时已晚，或者需要更复杂的API调用来手动修改内部状态，增加了复杂性。

2. 推荐的解决方案：利用dataBound事件和事件传播控制

为了有效且简洁地实现条件行选择控制，我们推荐一种结合Kendo Grid的dataBound事件和JavaScript事件传播机制的方案。

2.1 方案核心思想

该方案的核心在于：

1. 在dataBound事件中动态绑定事件： Kendo Grid的dataBound事件在数据绑定到网格并渲染完成后触发。此时，所有的行和其内部元素（包括选择列的复选框）都已存在于DOM中，我们可以安全地对其进行操作。
2. 监听复选框的click事件： 我们为选择列中的每个复选框绑定一个click事件处理器。
3. 条件判断与阻止传播： 在click事件处理器中，我们获取当前行的数据项，并根据预设条件进行判断。如果条件满足（即该行不应被选中），我们手动将复选框的状态切换回其点击前的状态（即如果用户点击了选中，我们将其取消选中），并调用e.stopImmediatePropagation()来阻止该点击事件继续向上冒泡，从而防止Kendo Grid的默认选择逻辑被触发。

2.2 示例代码

以下是如何在Kendo Grid配置中实现此逻辑的示例：

$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/odata/Products"
},
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { type: "number" },
ProductName: { type: "string" },
UnitPrice: { type: "number" },
UnitsInStock: { type: "number" },
Discontinued: { type: "boolean" } // 假设这是一个指示是否停产的字段
}
}
},
pageSize: 20
},
height: 550,
selectable: "multiple row", // 启用多行选择
pageable: true,
columns: [
{ selectable: true, width: "50px" }, // 选择列
{ field: "ProductName", title: "产品名称" },
{ field: "UnitPrice", title: "单价", format: "{0:c}" },
{ field: "UnitsInStock", title: "库存量" },
{ field: "Discontinued", title: "已停产", template: "#= Discontinued ? '是' : '否' #" }
],
// 关键部分：在dataBound事件中处理
dataBound: function() {
var grid = this;
// 查找所有选择列中的复选框并绑定点击事件
grid.tbody.find('tr .k-select-checkbox').on('click', function(e) {
var row = $(this).closest("tr");
var dataItem = grid.dataItem(row); // 获取当前行的数据项
// 假设条件是：如果产品已停产 (Discontinued = true)，则不允许选择
if (dataItem.Discontinued) {
// 切换复选框的选中状态回其点击前的状态
// 如果用户点击使其选中，则这里会将其取消选中
// 如果用户点击使其取消选中，则这里会将其选中（确保始终是未选中状态）
$(this).prop('checked', !$(this).prop('checked'));
// 阻止事件继续传播，防止Kendo Grid的默认选择逻辑被触发
e.stopImmediatePropagation();
// 给予用户反馈
kendo.alert(`${dataItem.ProductName} 已停产，您无法选择！`);
}
});
}
});
});

2.3 代码解析

• dataBound: function() { … }: 这是Kendo Grid的一个事件，在数据加载并渲染到网格后触发。在这个时机，我们可以确保DOM元素已经存在。
• var grid = this;: 在dataBound事件处理器中，this指向当前的Kendo Grid实例。
• grid.tbody.find(‘tr .k-select-checkbox’).on(‘click’, function(e) { … });:
  • grid.tbody：获取网格的主体部分。
  • .find(‘tr .k-select-checkbox’)：查找所有行中带有k-select-checkbox类的元素，这些就是选择列的复选框。
  • .on(‘click’, …)：为这些复选框绑定一个点击事件处理器。
• var row = $(this).closest(“tr”);: this在点击事件中指向被点击的复选框。closest(“tr”)用于向上查找最近的行元素。
• var dataItem = grid.dataItem(row);: 这是Kendo Grid提供的一个非常实用的方法，它根据DOM行元素获取该行所绑定的原始数据项对象。
• if (dataItem.Discontinued) { … }: 这是我们的条件判断逻辑。您可以根据自己的需求修改dataItem.Discontinued。
• $(this).prop(‘checked’, !$(this).prop(‘checked’));: 如果条件满足，这条语句会反转复选框的当前选中状态。例如，如果用户点击了它使其变为选中状态，这条语句会立即将其变回未选中状态。
• e.stopImmediatePropagation();: 这是关键一步。 它阻止了当前事件（点击事件）的进一步传播，包括阻止同一元素上的其他事件处理器以及父元素上的事件处理器被触发。这意味着Kendo Grid内部监听此点击事件来更新其选择状态的机制将不会被执行，从而有效地防止了不符合条件的行被选中。
• kendo.alert(…): 提供用户友好的反馈，告知用户为什么无法选择该行。

3. 注意事项与最佳实践

• 条件逻辑的灵活性： 示例中使用dataItem.Discontinued作为条件，您可以根据实际业务需求修改或扩展条件判断逻辑，例如检查多个字段、进行更复杂的计算等。
• 用户体验： 当阻止用户选择时，务必提供清晰的视觉和文本反馈（如kendo.alert），告知用户原因，避免造成困惑。
• 性能考量： 对于包含大量数据和频繁重绘的网格，在dataBound事件中绑定事件可能会有轻微的性能开销。然而，对于大多数常见场景，这种方法是高效且可接受的。如果遇到性能瓶颈，可以考虑事件委托（将点击事件绑定到grid.tbody而非每个复选框）。
• 兼容性： 确保您的Kendo UI版本支持上述API和事件行为。
• 其他选择模式： 本教程主要针对selectable: “multiple row”模式。对于其他选择模式（如single row），原理类似，但可能需要微调选择器或逻辑。

4. 总结

通过在Kendo Grid的dataBound事件中，为选择列的复选框绑定自定义点击事件处理器，并利用e.stopImmediatePropagation()来阻止不符合条件的行被Kendo Grid默认选择逻辑处理，我们可以优雅且有效地实现基于条件的行选择控制。这种方法不仅确保了UI的正确性，也同步维护了Kendo Grid内部的选中状态，从而提供了更精确和可控的用户交互体验。