How to highlight first cell of subsequent row on enter keypress after entering data?

[Stefan]

I've written a code to create a new row on enter keyup, when you're currently in the last row. But the issue I am facing is that, when you type some data and then press enter key, it doesnt create a new row. (It goes to the first cell of the first row.) I think the issue I am facing is because of the "this.refresh();" function which is being called under "save" function in the Kendo UI. I just can't get rid of that function since I'm using an aggregate functionality which i need to sum up all the values in all the tabs in the jsfiddle posted here. [ http://jsfiddle.net/aravind_93/w65y447p/1/ ]
May I know if there is any way such that a new row is created as well as the first cell of the newly created row is highlighted. PS: If there are 5 rows and I am currently in the 3rd row, if I press the enter key it should navigate to the subsequent row and highlight the first cell. (Since, in this case it is not the last row,I don't need to create a new row, but just navigate to the subsequent row on click.)
I've tried to make use of editable-cell properties, but nothing worked.
So, in short my question is to navigate to the subsequent row and highlight the first cell on enter key press(after or before entering data) and to create a new row on enter key press and highlight it's first cell.
save:function(e){this.refresh();}
^^This is the function responsible for refreshing the content of the Kendo Grid when data is entered.

 

[Stefan]

http://jsfiddle.net/aravind_93/Lw6awf6g/

 This is the updated fiddle.

 

[Stefan]

Can any of the admins please reply to this?

[Dimo]

Hi Stefan,

The refresh() method causes the Grid table to be re-rendered, and the dataBound event to be fired.

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-refresh

Any changes related to the table DOM or focusing a particular cell must be performed after this re-rendering is complete. One option is to do this in a dataBound event handler.

Regards,
Dimo
Telerik

[Stefan]

Hi Dimo,

 

But the databound event is fired only when the grid.addRow() is called. I won't be able to access the data before that (I woould like to access data even if new row isn't created.).

 

Also, please find this http://www.telerik.com/forums/is-it-possible-to-call-one-event-of-kendo-ui-inside-another-event

 

I think if i am able to do that ^^ I'll be able to handle it.

[Dimo]

Hi Stefan,

The dataBound event will also be called if you execute the refresh() method, as my colleague has explained in the linked forum thread. The refresh() method is currently executed in the save event handler. However, in order to prevent duplicate dataBound firing, please execute refresh() inside the save handler in a setTimeout block.

You need something like this:

function onGridSave(e) {
  setTimeout(function(){
    e.sender.one("dataBound", function(j){
      // focus the desired table cell here
    });
    e.sender.refresh();
  });
}

Regards,
Dimo
Telerik

 

 

[Stefan]

Hi Dimo, 

 

When I tried to implement the solution you gave, eventhough it focuses table cell, it just goes to the top position after that specific time interval of settimeout function!!

 

 

[Dimo]

Hello Stefan,

What argument are you passing to the editCell or current method? I suspect that it is a reference to a table cell, which has been saved before the refresh() method is called. Since the whole data table is re-rendered during refresh, the table cell reference points to an element, which no longer exists. In order to focus/edit a cell after refresh (rebind), you need to save the data item UID and the cell index, not a specific table cell reference.

- get a data item object (Kendo UI Model) from a Grid table row
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-dataItem

- get the UID
http://docs.telerik.com/kendo-ui/api/javascript/data/model#fields-uid

- get a table row by data item UID
http://www.telerik.com/forums/find-a-row-in-the-grid-by-unique-id-or-selected#J-5K6SyquEqdYbBZhi68_g

In case the above information does not help, please provide the Grid save handler implementation, so that I can take a look at it.

Regards,
Dimo
Telerik

[Stefan]

Hi Dimo,

http://jsfiddle.net/4x873x39/1/

 

The time is updated only when a new row is added.

I would like to update it as and when it changes. (It is possible by using refresh method, but as i told earlier, it just goes to the top most position. How to access uid of a newly created row(or uid of a next cell), before it goes to the top most position due to the refresh method)?

[Dimo]

Hello Stefan,

The UID of a row can be obtained via the event arguments of the save event.

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-save

Here is a snippet that shows how to call refresh() in the Grid's save handler and persist focus on the same table cell.

function onGridSave(e) {
  var uid = e.model.uid;
  var idx = $(e.container).index();
  setTimeout(function(){
    e.sender.one("dataBound", function(j){
      j.sender.current($("[data-uid='" + uid + "']").children().eq(idx));
    });
    e.sender.refresh();
  });
}

Regards,
Dimo
Telerik

[Stefan]

Hi Dimo, but the issue is that when you are in a cell and you typed something and then you pressed "Tab" key, then nothing happens, only if i press the tab key again, it will navigate to the next cell(refresh is working fine). 

Is it possible to navigate to the next cell (after entering something in the Kendo Grid cell)?

[Dimo]

Hi Stefan,

Tabbing will work as expected if you move the idx and uid retrieval inside the setTimeout block of the save event handler. You will no longer need e.model.uid or e.container. Use the current() and dataItem() methods to retrieve the values of these two variables.

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-current

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-dataItem

Note that current() will return a table cell in your case, while dataItem() requires a table row.

Also, you may want to use the editCell() method instead of current() inside the dataBound handler to directly enter edit mode.

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-editCell

Regards,
Dimo
Telerik