Kendo Grid箭头键导航问题：非可编辑单元格按键无响应

我之前也碰到过类似的情况，50多列的Kendo Grid混着可编辑和非可编辑单元格，箭头键到非可编辑区域就“罢工”，确实挺闹心的。咱们一步步来搞定这个问题：

要让箭头键在所有单元格（不管可不可编辑）都生效，关键是两个点：一是让非可编辑单元格能获取焦点，二是确保按键事件能覆盖到所有单元格，而不是只绑定在可编辑单元格上。

1. 给非可编辑单元格添加焦点支持 #

默认情况下非可编辑单元格是没法被聚焦的，咱们在dataBound事件里给它们加上tabindex="0"属性，让它们具备焦点能力：

function onDataBound(e) {
    const grid = e.sender;
    // 给所有非可编辑单元格添加tabindex，排除掉已编辑和原生可编辑的单元格
    grid.tbody.find("td")
        .not(".k-edit-cell, [data-role='editable']")
        .attr("tabindex", "0");
}

2. 全局绑定按键事件（覆盖所有单元格） #

别只在可编辑单元格上绑keydown，直接把事件委托到Grid的tbody上，这样不管点击哪个单元格，按键操作都能被捕获：

function onDataBound(e) {
    const grid = e.sender;
    // 先移除旧的事件绑定，避免重复触发
    grid.tbody.off("keydown");

    // 把keydown事件委托给tbody下的所有td
    grid.tbody.on("keydown", "td", function(e) {
        const currentCell = $(this);
        const keyCode = e.keyCode;

        // 处理左右箭头键
        if (keyCode === 37 || keyCode === 39) {
            e.preventDefault(); // 阻止页面滚动的默认行为
            const direction = keyCode === 37 ? "prev" : "next";
            let targetCell = currentCell[direction]("td");

            // 如果到了行尾/行首，切换到相邻行的对应列
            if (!targetCell.length) {
                const currentRow = currentCell.closest("tr");
                const targetRow = keyCode === 37 ? currentRow.prev("tr") : currentRow.next("tr");
                if (targetRow.length) {
                    targetCell = targetRow.find("td").eq(currentCell.index());
                }
            }

            // 聚焦目标单元格，若为可编辑单元格则自动进入编辑模式
            if (targetCell.length) {
                targetCell.focus();
                if (targetCell.hasClass("k-edit-cell") || targetCell.attr("data-role") === "editable") {
                    grid.editCell(targetCell);
                }
            }
        }

        // 处理上下箭头键（按需开启）
        if (keyCode === 38 || keyCode === 40) {
            e.preventDefault();
            const currentRow = currentCell.closest("tr");
            const targetRow = keyCode === 38 ? currentRow.prev("tr") : currentRow.next("tr");

            if (targetRow.length) {
                const targetCell = targetRow.find("td").eq(currentCell.index());
                targetCell.focus();
                if (targetCell.hasClass("k-edit-cell") || targetCell.attr("data-role") === "editable") {
                    grid.editCell(targetCell);
                }
            }
        }
    });

    // 再执行给非可编辑单元格加tabindex的逻辑
    grid.tbody.find("td")
        .not(".k-edit-cell, [data-role='editable']")
        .attr("tabindex", "0");
}

3. 关联Grid初始化配置 #

最后在Grid的初始化代码里，把dataBound事件关联上：

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
    dataSource: yourDataSource, // 替换成你的数据源
    columns: yourColumnsConfig, // 替换成你的列配置
    editable: "incell", // 适配你使用的编辑模式
    dataBound: onDataBound
});
</script>

• 事件委托的优势：用tbody.on()绑定事件，分页、刷新后新加载的行也会自动继承事件，不用重复绑定。
• 焦点控制：tabindex="0"是让非可编辑单元格能被聚焦的核心，没有这个focus()方法会失效。
• 编辑模式切换：如果不需要进入可编辑单元格时自动打开编辑器，可以删掉grid.editCell(targetCell)这部分代码。

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