1. 问题背景与挑战
在使用kendo grid的asp.net mvc项目中，当网格包含一个选择列（select column）时，开发者可能需要根据特定业务逻辑（例如，某个商品已停产）来阻止用户选择某些行。常见的尝试是监听网格的change事件，并在事件处理函数中根据条件判断来取消选中相应的复选框。然而，这种方法往往只能更新ui上的复选框状态，却无法同步更新kendo grid内部的选中状态（如this.select()、this.selectedkeynames()和this._selectids()等方法返回的结果）。这意味着尽管用户界面显示该行未被选中，但网格的内部模型仍可能错误地将其视为已选中，导致后续操作基于错误的数据。
直接在change事件中尝试阻止或回滚选择通常是无效的，因为change事件在选择行为已经发生之后才触发，此时网格的内部状态已更新。因此，我们需要一种在选择行为完成之前进行干预的机制。
2. 解决方案：利用 dataBound 事件和自定义点击处理
为了有效解决UI与内部状态不同步的问题，推荐的方法是利用Kendo Grid的dataBound事件，为选择列的复选框添加一个自定义的点击事件处理程序。这样，我们可以在用户实际选择复选框之前进行条件判断，并根据结果决定是否允许该选择操作。
2.1 核心思路
- dataBound 事件监听： 每当Kendo Grid的数据绑定完成（例如，首次加载、分页、排序、过滤等），dataBound事件都会触发。在这个事件中，我们可以访问到网格的DOM元素。
- 附加点击事件： 在dataBound事件内部，遍历网格的行，找到选择列中的复选框，并为其附加一个点击事件处理器。
-
条件判断与阻止传播： 在自定义的点击事件处理器中，获取当前行的数据项，并根据预设的业务条件进行判断。如果条件满足（即该行不应被选中），则执行以下操作：
- 反转复选框状态： 将复选框的状态恢复到点击前的状态（即如果本来是未选中，点击后变成选中，则再将其设为未选中；反之亦然）。
- 阻止事件传播： 调用e.stopImmediatePropagation()或e.preventDefault()来阻止当前点击事件继续传播，从而防止Kendo Grid的默认选择逻辑被触发，确保网格的内部状态不会更新。
- 用户反馈： 可选地，向用户提供一个提示信息，说明为何无法选择该行。
2.2 示例代码
以下代码展示了如何在Kendo Grid中实现这一解决方案，以阻止用户选择“已停产（Discontinued）”的商品：
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
},
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { type: "number" },
ProductName: { type: "string" },
UnitPrice: { type: "number" },
Discontinued: { type: "boolean" } // 假设有Discontinued字段
}
}
},
pageSize: 20,
serverPaging: true,
serverSorting: true
},
height: 550,
sortable: true,
pageable: true,
columns: [
{ selectable: true, width: "50px" }, // 选择列
{ field: "ProductName", title: "产品名称", width: "200px" },
{ field: "UnitPrice", title: "单价", format: "{0:c}", width: "100px" },
{ 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); // 获取当前行的数据项
// 假设我们不允许选择已停产的产品
if (dataItem.Discontinued) {
// 反转复选框的选中状态，使其回到点击前的状态
$(this).prop('checked', !$(this).prop('checked'));
// 阻止事件传播，防止Kendo Grid的默认选择逻辑被触发
e.stopImmediatePropagation();
// 给出用户提示
kendo.alert(`${dataItem.ProductName} 已停产，您无法选择它！`);
}
});
}
});
});2.3 代码解析
- dataBound: function() { ... }: 这是Kendo Grid的事件处理器，在每次数据绑定后执行。
- var grid = this;: 获取对当前Kendo Grid实例的引用。
- grid.tbody.find('tr .k-select-checkbox').on('click', function(e) { ... });: 这行代码是关键。它在网格的tbody中查找所有带有k-select-checkbox类的元素（即选择列的复选框），并为它们绑定了一个click事件处理器。
- var row = $(this).closest("tr");: 获取当前被点击复选框所在的行。
- var dataItem = grid.dataItem(row);: 根据行元素获取其绑定的数据项。这是进行条件判断的基础。
- if (dataItem.Discontinued) { ... }: 这里是您的业务逻辑条件。如果Discontinued属性为true，则执行阻止选择的逻辑。
- $(this).prop('checked', !$(this).prop('checked'));: 这行代码非常重要。它将复选框的checked属性设置为其当前值的反面。由于click事件已经发生了，复选框的UI状态可能已经改变，这行代码将其恢复到点击前的状态，从而在视觉上取消了用户的选择意图。
- e.stopImmediatePropagation();: 这是阻止Kendo Grid内部选择逻辑的关键。它阻止了当前事件向父元素（如tr或grid本身）的进一步传播，从而避免了Kendo Grid的默认select事件被触发和内部状态的更新。
- kendo.alert(...): 提供友好的用户反馈，告知用户为何无法选择该行。
3. 注意事项
- 事件绑定时机： 将点击事件绑定放在dataBound事件中至关重要。如果数据源发生变化（如分页、排序、过滤），网格会重新渲染，原有的事件绑定可能会失效。dataBound确保了每次DOM更新后，事件都能重新正确绑定。
- e.stopImmediatePropagation() 的重要性： 请务必使用此方法。如果没有它，即使您反转了复选框的UI状态，Kendo Grid的内部选择逻辑仍可能被触发，导致UI与内部状态再次不一致。
- 用户体验： 提供清晰的用户反馈（如kendo.alert或自定义的提示信息）对于提升用户体验非常重要，告知用户为何他们的操作被阻止。
- 条件复杂性： 您的条件判断可以根据业务需求变得更复杂，例如结合多个字段、调用外部服务进行验证等。
- 性能考量： 对于包含大量行的网格，在dataBound事件中绑定大量事件处理器可能会有轻微的性能开销。然而，对于大多数常见场景，这种开销是可接受的。如果遇到性能瓶颈，可以考虑事件委托等优化手段。
4. 总结
通过在Kendo Grid的dataBound事件中，为选择列的复选框附加一个自定义的点击事件处理器，并利用e.stopImmediatePropagation()方法，我们可以有效地在用户尝试选择特定行时进行干预。这种方法不仅能够同步更新UI上的复选框状态，更能阻止Kendo Grid内部选择状态的更新，从而确保网格的UI显示与内部数据模型始终保持一致。这为在ASP.NET MVC Kendo Grid中实现基于条件的行选择控制提供了一个健壮且专业的解决方案。
