Programatically set focus to specific cell when grid is in inline edit mode

[Jerry T.]

Ok, I'm missing something somewhere.

I need to be able to set focus to a specific cell (cellIndex) when a grid is in inline edit mode.

Is it possible to do this?

Jerry

[Iliana Dyankova]

Hello Jerry,

The described functionality is not supported out of the box, but you could easily implement it via custom code. For example, in the grid edit event you could find the specific cell and set the focus() on it. Like here: 

$("#grid").kendoGrid({
   //...
   editable: "inline",
   edit: function(e){
      e.container.find("td:eq(2) input").focus();
   }
});

I hope this helps.

 

Regards,
Iliana Nikolova
the Telerik team

[Jerry T.]

Is there a way to get this to work properly in the dataBound event?

My problem is that I update the grid (and the datasource) and then want to set a specific cell to be edited after all is refreshed but it doesn't work (at least not consistently).

If there were something like a pre-render event or a rendered event, it would open up a lot of flexibility to the Kendo Grid!

Jerry

[Iliana Dyankova]

Hello Jerry,

I am not sure if I understand you correctly because when the dataBound event is fired the grid's rows are in display mode, while the cells can be edited when the grid is in edit mode. Please elaborate more on the exact functionality you are trying to implement - this way we will be able to provide the most appropriated solution and assist you best? Thank you in advance.     
 
 
Greetings,
Iliana Nikolova
the Telerik team

[Jerry T.]

I'm trying to allow constant, on-the-fly updating as the grid should be able to do, much like your AJAX and Silverlight grid controls.

I need a grid to be edited cell-by-cell and update the database as the user tabs to the next cell.

The best I've come up with is some code in the databound event to call editcell on that next row/cell index (where I save those values in the grid's Save and Edit events. As you can see from my code snippet below, I've tried many different ways. The current way seems to work but only for the first edited cell. If I then change the value of the next cell, the grid loses focus and the next cell after that does not go into edit mode.

onCostingSheetItemDataBound: function(e) {

    if (_rowIndex && _cellIndex) {

        /*var grid = $("#costingSheetItems").data("kendoGrid");

        //var cell = grid.tbody.find("tr").eq(_rowIndex).find("td").eq(_cellIndex);

 

        grid.select(grid.tbody.find("tr").eq(_rowIndex));

 

        var cell = grid.tbody.find("tr").eq(_rowIndex).find("td").eq(_cellIndex).find("input");

 

        cell.focus();*/

 

        setTimeout(function() { var grid = $("#costingSheetItems").data("kendoGrid"); grid.select(grid.tbody.find("tr").eq(_rowIndex)); e.sender.element.focus(); grid.editCell(grid.tbody.find("tr").eq(_rowIndex).find("td").eq(_cellIndex)); }, 750);

 

        //setTimeout(function() { grid.select(grid.tbody.find("tr").eq(_rowIndex)) }, 250);

        //setTimeout(function() { grid.editCell(cell) }, 250);

 

        //setTimeout(function() { grid.editCell(cell); }, 250);

 

        /*if (!$("#costingSheetItems").data("kendoGrid").tbody.find("tr").eq(_rowIndex).hasClass("k-grid-edit-row")) {

            //grid.editRow($("#costingSheetItems").data("kendoGrid").tbody.find("tr").eq(_rowIndex));

            //grid.select($("#costingSheetItems").data("kendoGrid").tbody.find("tr").eq(_rowIndex));

            //setTimeout(function() { $("#costingSheetItems").focus(); }, 100);

            //grid.select(cell);

 

            //_newCell.style.display = "

            //_newCell.trigger("click");

        }*/

        //cell.addClass("k-state-focused");

 

        //$("input[class='k-edit-cell']").trigger("click");

    }

},

Jerry

[Iliana Dyankova]

Hello Jerry,

I am afraid currently there is no pre-render event in Kendo UI and I think the workaround with the setTimeout() function in the dataBound event is suitable for your scenario. 

On a side note, from the provided code snippet it seems that the rowIndex and cellIndex are not updated - in order to set the focus to specific cell you need to update the rowIndex/cellIndex. 
  
Regards,
Iliana Nikolova
the Telerik team

[Jerry T.]

I do set the _rowIndex and _cellIndex variables in the appropriate places (edit and save events)

Also, the setTimeout does not work. Consistenly, after editing a 2nd consecutive cell, the focus goes someplace, usually the address bar but sometimes I'm not sure where as nothing seems to have focus

[Iliana Dyankova]

Hi Jerry,

I am not sure what causes such behavior in your application. May I ask you to send a small but runnable project that reproduces the issue. Thus way I would be able to investigate your specific case in details and do my best to help you. Thank you in advance. 
 
Regards,
Iliana Nikolova
the Telerik team