8

I have a kendo grid with edit mode set to incell.

What is the most elegant way of programmatically focus a particular cell to force it into an edit mode?

Let's say I have a grid where column 1 and 6 are editable. As soon as user finishes typing something into column 1, I'd like the column 6 textbox to be automatically focused and enabled for editing so that the user doesn't have to manually click on the next editable gridcell for the same row.

This is what I'm doing at the moment:

//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); 
}

First of all, I'm using setTimeout to implement what is seemingly a trivial function so this doesn't seem like the ideal approach.

Secondly, the above function only works when it feels like it (Only works half of the time from testing. Probably expected from setTimeout function). I feel like this has to do with the order of events called internally in Kendo Grid.

Thirdly, I'd like to block select the text that's inside the cell being focused. editTextCell.selectall(); doesn't work for this purpose.

I'd appreciate any guidance.

TtT23
  • 6,876
  • 34
  • 103
  • 174

1 Answers1

2

This is reliable way to achieve what you want. It still uses setTimeout, so it can reliably focus different kendo inputs (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();
}
Vedran Maric
  • 855
  • 9
  • 21