Kendo grid cell refocusing after refresh

[Tomislav]

I have a selectable, navigatable and editable grid. After I enter a
value in a cell, I have to change the value in the cell under the
updated cell. To show the updated values of both cells, I have to
refresh the grid. When I do that, the edited cell loses focus. I found a
way to refocus the last edited cell during the save event:

save: function (e) {
    var focusedCellIndex = this.current()[0].cellIndex;    //gets the cell index of the currently focused cell

    //...some dataItem saving (dataItem.set()) logic...

    this.refresh();    //refreshing the grid instance

    setTimeout(function () {    //refocusing the cell
        return function () {
            var focusedCell = $("#grid tr[data-uid='" + dataItem.uid + "'] td:nth-child(" + (focusedCellIndex + 1) + ")");
            $('#grid').data('kendoGrid').editCell(focusedCell);
        }
    }(), 200);
}

The problem is that this works for the first time, but if I try to
re-edit the same cell again, the cell loses focus. When I try to debug,
it seems that this.current()[0].cellIndex returns 0 in the second attempt, and because of that cell focusing isn't working anymore.

Does anyone have any idea why this.current() works for the 1st time, and not for the 2nd time? Are there any other approaches for refocusing the cell?

[Alexander Popov]

Hi Tomislav,

I tried to reproduce this behavior here, but got the cell was correctly re-focused. Could you please check the example and let me know if I am doing something differently?

Regards,
Alexander Popov
Telerik

 

 

[kesavan]

Iam also getting the same issue.Have you  fixed this? If fixed what is the solution?

[Alexander Popov]

Hi kesavan,

Would you please share an example where this behavior is reproduced, as so far we were unable to?

Regards,
Alexander Popov
Telerik

 

 

[Alexandra]

Hi, Alexander! I have the same problem, that is described above. 
There example is here: https://dojo.telerik.com/@AleksandraZakharova/AsuvikOK. I use the refresh method of Kendo Grid in Save method. My problem is the following: after entering some value in name column and then pressing TAB key, the next cell (in "age" column) is not active (is not in edit mode). If you comment the calling of refresh method, it will be ok: "age" cell will be active (in edit mode). How to prevent cell closing if I need to refresh Kendo Grid in Save method? 

My code is below:
 <div id="grid"></div>
<script>
  $("#grid").kendoGrid({
    columns: [
      { field: "name" },
      { field: "age" }
    ],
    dataSource: {
     data: [
      { id: 1, name: "Jane Doe", age: 30 },
      { id: 2, name: "John Doe", age: 33 }
     ],
     schema:{
      model: {
       id: "id",
       fields: {
         age: { type: "number"}
       }
      }
     }
    },
    editable: true,
    navigatable: true,
    save: function(e) {
      $("#grid").data("kendoGrid").refresh()
    }
  });
</script> 

[Anton Mironov]

Hi Alexandra,

In order to persist the focus of the cell, I would recommend following the article below:

• https://docs.telerik.com/kendo-ui/knowledge-base/persist-focused-cell

Setting the edit mode of the cell could be implemented in the "dataBound" event of the Kendo UI Grid, as follows:

 e.sender.editCell(e.sender.tbody.children().eq(rowIndex).children().eq(cellIndex));

The complete implementation could be found in the following dojo example:

• https://dojo.telerik.com/iQORekiV

Let me know if further assistance is needed.


Kind Regards,
Anton Mironov
Progress Telerik