如何在Kendo Grid中实现单元格tooltip显示对应列的表头名称

核心逻辑是通过当前单元格的索引，匹配Grid初始化时的列配置，取出对应列的表头名称即可，修改后的代码如下：

myGrid.kendoTooltip({
    filter: "td",
    content: function (e) {
        // 先获取当前单元格的DOM节点，避免点击到td内部子元素导致索引计算错误
        const target = $(e.target).closest("td");
        // 获取Grid实例
        const grid = myGrid.data("kendoGrid");
        // 获取当前单元格对应的列索引，和columns数组顺序一一对应
        const colIndex = target.index();
        // 优先取列配置的title（即原本的表头文本），没有配置title的话取绑定的字段名
        const columnName = grid.options.columns[colIndex].title || grid.options.columns[colIndex].field;
        return columnName;
    }
});

如果你的Grid开启了内置的复选框选中列、行序号列，不需要给这些内置列显示tooltip，可以加一层过滤判断：

myGrid.kendoTooltip({
    filter: "td",
    content: function (e) {
        const target = $(e.target).closest("td");
        const grid = myGrid.data("kendoGrid");
        const colIndex = target.index();
        const currentColumn = grid.options.columns[colIndex];
        // 过滤掉内置的命令列、无绑定字段的系统列
        if(currentColumn.command || !currentColumn.field) {
            return "";
        }
        return currentColumn.title || currentColumn.field;
    }
});

注意事项 #

• 你之前通过CSS隐藏表头的操作不会影响该方案的效果，Grid的列配置会一直保留你设置的title值。
• 如果不需要字段名作为兜底，直接返回currentColumn.title即可。

内容的提问来源于stack exchange，提问作者Patrick95