Kendo grid cell refocusing after refresh

6 posts, 0 answers
  1. Tomislav
    Tomislav avatar
    6 posts
    Member since:
    Feb 2014

    Posted 09 Apr 2014 Link to this post

    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?
  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1445 posts

    Posted 11 Apr 2014 Link to this post

    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!
     
  3. kesavan
    kesavan avatar
    2 posts
    Member since:
    Dec 2013

    Posted 29 May 2015 in reply to Tomislav Link to this post

    Iam also getting the same issue.Have you  fixed this? If fixed what is the solution?
  4. Alexander Popov
    Admin
    Alexander Popov avatar
    1445 posts

    Posted 29 May 2015 Link to this post

    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!
     
  5. Alexandra
    Alexandra avatar
    2 posts
    Member since:
    Sep 2020

    Posted 16 Nov 2020 in reply to Alexander Popov Link to this post

    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> 
  6. Anton Mironov
    Admin
    Anton Mironov avatar
    203 posts

    Posted 18 Nov 2020 Link to this post

    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/.

Back to Top