This is a migrated thread and some comments may be shown as answers.

Kendo grid cell refocusing after refresh

5 Answers 854 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Tomislav
Top achievements
Rank 1
Tomislav asked on 09 Apr 2014, 02:33 PM
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?

5 Answers, 1 is accepted

Sort by
0
Alexander Popov
Telerik team
answered on 11 Apr 2014, 09:15 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
kesavan
Top achievements
Rank 1
answered on 29 May 2015, 10:41 AM
Iam also getting the same issue.Have you  fixed this? If fixed what is the solution?
0
Alexander Popov
Telerik team
answered on 29 May 2015, 01:15 PM
Hi kesavan,

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

Regards,
Alexander Popov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Alexandra
Top achievements
Rank 1
answered on 16 Nov 2020, 02:17 PM
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> 
0
Anton Mironov
Telerik team
answered on 18 Nov 2020, 11:21 AM

Hi Alexandra,

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

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:

Let me know if further assistance is needed.


Kind Regards,
Anton Mironov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Tomislav
Top achievements
Rank 1
Answers by
Alexander Popov
Telerik team
kesavan
Top achievements
Rank 1
Alexandra
Top achievements
Rank 1
Anton Mironov
Telerik team
Share this question
or