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

Save in cell edits before calling editCell or calling close cell.

2 Answers 146 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Matt
Top achievements
Rank 1
Matt asked on 18 Sep 2019, 09:30 PM

I'm implementing some custom navigation options in one of my kendo grids. Specifically our users want the grid to behave similarly to excel, navigating to the next row and editing the cell when a user hits the enter key. 

Based on recommendations here : https://www.telerik.com/forums/kendo-grid-navigation-with-enter-key 

I have disabled the navigatable option and have implemented my own keydown bindings. Using jquery I am selecting the next cell and then calling the following 

            grid.current(nextCell);
            grid.editCell(nextCell[0])

This puts the correct cell into edit mode, but in the process I lose any changes the user had made to the previous cell.

I have tried calling close cell as referenced here: https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/closecell 

but I cant seem to determine a way to call the method and not cancel changes. 

Is there a different method I need to call? Or a different way to persist the cell edit?

2 Answers, 1 is accepted

Sort by
0
Tsvetomir
Telerik team
answered on 20 Sep 2019, 12:29 PM

Hi Matt,

Based on the provided information, I suspect that you bind the keydown event to the table of the grid, is that correct? If so, at the time the editCell method is called, the blur event of the input is not triggered. Therefore, the values are not saved in the grid's model. 

What I can recommend is to either bind the keyup event to the table or use the setTimeout() function:

      grid.table.on("keyup", function(e){
        if(e.keyCode == 13){
          var nextCell = $(e.target.closest("td")).next();
          
            grid.editCell(nextCell[0]);
            grid.current(nextCell);
        }
      }); 

      grid.table.on("keydown", function(e){
        if(e.keyCode == 13){
          var nextCell = $(e.target.closest("td")).next();
          
          setTimeout(function(){
            grid.editCell(nextCell[0]);
            grid.current(nextCell);
          });
        }
      }); 

Below is the corresponding Dojo, it does not have the functionality of selecting a cell on the next row, but the essentials are there:

https://dojo.telerik.com/OrOpOvem

Let me know in case the issue is still present.

 

Best regards,
Tsvetomir
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Matt
Top achievements
Rank 1
answered on 11 Oct 2019, 04:44 PM
Thanks! The set timeout fixed it for us!
Tags
Grid
Asked by
Matt
Top achievements
Rank 1
Answers by
Tsvetomir
Telerik team
Matt
Top achievements
Rank 1
Share this question
or