如何在Kendo Grid中的可编辑单元格之间添加自定义键盘导航 [英] How to add custom keyboard navigation between editable cells in Kendo Grid

问题描述

作为此问题的延续答案:

如何为Kendo Grid实现自定义按键处理程序，以启用以下功能:

1. 箭头键在上下行中导航
2. 导航时将单元格内容保存到网格中
3. 打开下一个单元格的编辑器

解决方案

我将使用这个问题，kendo.grid.js来源以及我自己的实验.如果其他人有更好的解决方案，我会很乐意接受.

// add a handler for the keydown event within the grid cells
$("#grid").kendoGrid().table.on("keydown", "td", function(e) {
    var grid = $("#grid").kendoGrid();

    if (e.keyCode == 38 || e.keyCode == 40) {
        var current = $(this);
        var row = current.closest("tr");
        var rowIndex = $("tr", grid.tbody).index(row);
        var colIndex = $("td", row).index(this);

        if (e.keyCode == 38) {//up
            rowIndex--;
        }

        if (e.keyCode == 40) {//down
            rowIndex++
        }

        //handle wraparound. Negative indexing already counts from the end, so only this case is needed
        if (rowIndex >= grid.dataSource.view().length) {
            rowIndex = 0;
        }

        var nextCellSelector = "#bid-items-grid tbody tr:eq(" + rowIndex + ") td:eq(" + colIndex + ")";
        grid._handleEditing(current, $(nextCellSelector), current.closest("table"));

        // reusing the jQuery object doesn't work here because the grid redraws
        grid.editCell($(nextCellSelector));
    }
});

这很简单，您编写一个自定义的keydown事件处理程序.您阅读键，确定您所在的单元格以及需要移动到的单元格，然后处理网格上的环绕情况.

第一个技巧是调用_handleEditing().这是Kendo网格用于处理编辑的内部功能.它的签名是_handleEditing: function(current, next, table)，将当前单元格，下一个单元格和表本身作为输入. 注意: _方法是内部方法:不能将其设计为在外部使用，并且不能保证在更新中保持不变.但是我找不到实现这一目标的官方方法.谨慎使用.

这看起来像它将选择下一个要自动编辑的单元格，如果这样，您可能会忽略对grid.editCell()的调用.但是，以我的经验，_handleEditing()导致网格重绘，这导致JQuery对象与表单元格元素分离.

这就是为什么调用grid.editCell()需要使用行和列位置的显式选择器，而不仅仅是将JQuery对象保存在变量中的原因.

基于 Tab的导航可以类似的方式实现，并且可以方便地将kendo.keys.TAB定义与keyCode进行比较，以提高可读性.另外，在使用Tab的支持下，您将需要吞下浏览器默认的Tab行为，即尝试跳至下一个输入:

e.preventDefault();
e.stopPropagation();

As a continuation of this Question and Answer:

How do I implement a custom keypress handler for a Kendo Grid enabling the following:

1. Arrow Keys navigate up and down rows
2. The Cell contents are saved to the grid when navigating away
3. The next Cell's editor is opened

解决方案

I'll answer my own question with information found in the question in the Question, this question, the kendo.grid.js source, and my own experimentation. If anyone else has a better solution, I'll happily accept it instead.

// add a handler for the keydown event within the grid cells
$("#grid").kendoGrid().table.on("keydown", "td", function(e) {
    var grid = $("#grid").kendoGrid();

    if (e.keyCode == 38 || e.keyCode == 40) {
        var current = $(this);
        var row = current.closest("tr");
        var rowIndex = $("tr", grid.tbody).index(row);
        var colIndex = $("td", row).index(this);

        if (e.keyCode == 38) {//up
            rowIndex--;
        }

        if (e.keyCode == 40) {//down
            rowIndex++
        }

        //handle wraparound. Negative indexing already counts from the end, so only this case is needed
        if (rowIndex >= grid.dataSource.view().length) {
            rowIndex = 0;
        }

        var nextCellSelector = "#bid-items-grid tbody tr:eq(" + rowIndex + ") td:eq(" + colIndex + ")";
        grid._handleEditing(current, $(nextCellSelector), current.closest("table"));

        // reusing the jQuery object doesn't work here because the grid redraws
        grid.editCell($(nextCellSelector));
    }
});

This starts out simply, you write a custom keydown event handler. You read the keys, you determine which cell you're in and which ones you need to move to, you handle the wraparound cases on the grid.

The first trick comes in the call to _handleEditing(). This is the internal function kendo grid uses to process the editing. It's signature is _handleEditing: function(current, next, table), taking the current cell, the next cell, and the table itself as inputs. Note: _ methods are internal methods: They are not designed to be used externally, and are not guaranteed to stay the same across updates. But I could find no official way of achieving this. Use with caution.

This looks like it will select the next cell for editing automatically, and if it does you can probably omit the call to grid.editCell(). However, in my experience _handleEditing() causes the grid to redraw, which causes the JQuery objects to become detached from the table cell elements.

This is why calling grid.editCell() needs an explicit selector using the row and column positions, rather than just saving the JQuery object in a variable.

Tab based navigation can be implemented in a similar way, and a handy kendo.keys.TAB definition can be compared to the keyCode for readability. Also, with Tab support you'll need to swallow up the browser's default tab behaviour of attempting to jump to the next input:

e.preventDefault();
e.stopPropagation();

这篇关于如何在Kendo Grid中的可编辑单元格之间添加自定义键盘导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！