Kendo UI Core 中 Grid 组件分组展开失效问题解析

问题现象

在 Kendo UI Core 项目的 Grid 组件中，当同时满足以下两个条件时，用户无法通过点击展开分组行：

1. 启用了分组分页功能（group paging）
2. 容器元素添加了 k-rtl 类（用于支持从右到左的布局）

技术背景

Kendo UI 的 Grid 组件提供了强大的分组功能，允许用户按照指定字段对数据进行分组展示。在 RTL（从右到左）布局中，组件需要通过 k-rtl 类来调整界面元素的排列方向。

问题根源

经过分析，该问题的根本原因在于：

1. 图标渲染错误：在 RTL 模式下，分组展开图标未能正确渲染为对应的 SVG 和 CSS 类
2. 事件绑定失效：由于图标类名不匹配，导致 Grid 组件无法正确绑定点击事件处理器

解决方案

官方提供了临时解决方案，通过重写 Grid 原型的 _groupable 方法，修正 RTL 模式下的图标类名匹配逻辑：

kendo.ui.Grid.original_groupable = kendo.ui.Grid.prototype._groupable;
kendo.ui.Grid.prototype._groupable = function() {
    let that = this;
    kendo.ui.Grid.original_groupable.call(that);
    if (!kendo.support.isRtl(that.element)) {
        return;
    }

    if (that._isLocked()) {
        that.lockedTable.on("click.kendoGrid", ".k-grouping-row " + "a[class*='-i-caret-alt-right']", that._groupableClickHandler);
    } else {
        that.table.on("click.kendoGrid", ".k-grouping-row " + "a[class*='-i-caret-alt-right']", that._groupableClickHandler);
    }
}

影响范围

该问题影响以下版本组合：

• Kendo UI 版本：2024.3.806
• jQuery 版本：3.7.0
• 所有浏览器环境

最佳实践

对于遇到此问题的开发者，建议：

1. 应用官方提供的临时解决方案
2. 关注 Kendo UI 的版本更新，及时升级到修复此问题的版本
3. 在 RTL 布局下，特别注意测试分组功能的交互行为

总结

这个问题展示了在 RTL 布局下前端组件可能遇到的特殊挑战。开发者在实现国际化支持时，不仅需要考虑文本方向，还需要注意交互元素的行为一致性。Kendo UI 团队已经识别并修复了这个问题，为开发者提供了过渡解决方案。