【问题标题】:Kendo Grid Cell Not Entering Edit Mode When Tabbing To Grid From An Input Field从输入字段切换到网格时,Kendo 网格单元未进入编辑模式
【发布时间】:2017-05-10 16:03:53
【问题描述】:

我们将 Kendo 网格用于带有数据输入表单和可编辑网格的表头/明细会计应用程序。当从表格切换到网格时,第一个单元格不会进入编辑模式,除非在“导航”事件中使用一些解决方法“黑客”代码(见下文)。问题是当从表单输入字段切换到网格的第一个单元格与单击同一单元格时,网格编辑模式的工作方式实际上是不同的。单击(而不是制表符)进入第一个单元格确实会使该单元格进入编辑模式,但会清除字段内容。

用户可以通过 Tab 键转到网格的第一个单元格或单击其中以编辑单元格的所需行为。

这是网格的屏幕截图,其中第一个单元格聚焦,但未处于编辑模式(没有解决方法“hack”代码):

这是网格代码:

let grid = $("#" + target).kendoGrid({
    dataSource: {
        data: rows,
        schema: {
            model: {
                fields: columnSetup.modelFields
            }
        }
    },
    edit: function (e) {
        // This does not fire when tabbing to the grid. It will fire if a cell is clicked.
    },
    editable: {
        mode: "incell",
        createAt: 'bottom'
    },
    navigatable: true,
    navigate: function (e) {

        // Attempted Workaround - This does put the first cell in edit mode, but only when tabbing
        // to the grid. However, clicking in the first cell does put the cell in edit mode, but
        // clears the field value.
        if (e.sender['_rowVirtualIndex'] == 0 && e.element[0]['cellIndex'] == 0 && typeof (e.sender['_editContainer']) != 'object') {
            this.editCell(e.element[0])
        }
    },
    resizable: true,
    reorderable: true,
    scrollable: { virtual: true },
    selectable: "row",
    columns: columnSetup.columns,
    dataBound: keyboardEventHandler,

}).data('kendoGrid');

【问题讨论】:

  • 似乎有人拥有相同的question for Telerik(尽管是 3 年前)。也许将网格上方的输入移动到网格本身(通过工具栏模板)可能会给您带来一些成功?
  • 那篇文章确实回答了为什么在进入网格时字段没有获得焦点的问题。因此,剩下的问题是为什么在导航事件中使用 editCell 时使用标签与单击时的工作方式不同。

标签: kendo-grid


【解决方案1】:

要通过单击和制表键导航到网格,然后立即进入编辑模式,请在网格上的“导航”事件中使用kendoHelpers“refreshAndKeepEditing”函数:

navigate: function (e) {
    if (e.sender['_rowVirtualIndex'] == 0 && e.element[0]['cellIndex'] == 0 && typeof (e.sender['_editContainer']) != 'object') {

        this.editCell(e.element[0]);
        kendoHelpers.grid.refreshAndKeepEditing(grid, true);
    }
},

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2014-12-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多