Kendo Grid 如何以编程方式聚焦网格单元并阻止选择文本答案

【问题标题】：Kendo Grid how to programmatically focus a grid cell and block select the textKendo Grid 如何以编程方式聚焦网格单元并阻止选择文本
【发布时间】：2013-06-05 15:16:46
【问题描述】：

我有一个编辑模式设置为 incell 的剑道网格。

以编程方式聚焦特定单元格以强制其进入编辑模式的最优雅的方式是什么？

假设我有一个网格，其中第 1 列和第 6 列是可编辑的。一旦用户在第 1 列中输入完内容，我希望第 6 列文本框自动聚焦并启用编辑，这样用户就不必手动单击同一行的下一个可编辑网格单元。

这就是我现在正在做的事情：

//Focuses the editable cell at given row/column index.
//Closes the previously editing cell
//EX: setGridFocus(SALE_01_DIV_GRID,0,0) --> Focuses SALE_01_DIV_GRID (0,0)
function setGridFocus(gridID, rowIndex, colIndex)
{
    var grid = $('#' + gridID).data('kendoGrid');
    grid.closeCell();

    setTimeout(function(){
        var cell = $('#' + gridID).find('tbody tr:eq('+rowIndex+') td:eq('+colIndex+')');
        grid.editCell(cell);
        var editTextCell = cell.find("input.k-formatted-value");

        editTextCell.focus(function() {
            $(this).select().mouseup(function (e) {
                e.preventDefault();
                $(this).unbind("mouseup");
                e.select();
            });
        });
        cell.find("input[type=text]").select();
        editTextCell.selectall();
    },50); 
}

首先，我使用 setTimeout 来实现看似微不足道的功能，因此这似乎不是理想的方法。

其次，上面的函数只在感觉合适的时候才起作用（只有一半的时间在测试中起作用。可能来自 setTimeout 函数）。我觉得这与 Kendo Grid 内部调用的事件顺序有关。

第三，我想阻止选择处于焦点的单元格内的文本。 editTextCell.selectall();不适用于此目的。

如果有任何指导，我将不胜感激。

【问题讨论】：

标签： javascript jquery html kendo-ui kendo-grid

【解决方案1】：

这是实现您想要的可靠方法。它仍然使用setTimeout，因此它可以可靠地聚焦不同的剑道输入（Docs source for focusing kendo inputs）：

function setGridFocus(gridID, rowIndex, colIndex) {
  var grid = $('#' + gridID).data('kendoGrid');
  grid.closeCell();

  var cell = $('#' + gridID).find('tbody tr:eq(' + rowIndex + ') td:eq(' + colIndex + ')');
  grid.editCell(cell);
  var editTextCell = cell.find('input');

  var selectTimeId;

  editTextCell
    .on('focus', function() {
      var input = $(this);
      clearTimeout(selectTimeId); // stop started time out if any

      selectTimeId = setTimeout(function() {
        input.select();
        // To make this work on iOS, too, replace the above line with the following one. Discussed in https://stackoverflow.com/q/3272089
        // input[0].setSelectionRange(0, 9999);
      });
    })
    .blur(function(e) {
      clearTimeout(selectTimeId); // stop started timeout
    });


  editTextCell.focus();
}

【讨论】：