Kendo Grid Batch Edit - Navigate via arrows key ( down & up only )

[NoobMaster]

Hi

this JsFiddle Demo change this javascript line ( if (event.keyCode == 13) ) to ( if (event.keyCode == 40) ) 

then changes does not made after pressing down key arrow on keyboard.

i need help.

Thanx

[Petar]

Hi NoobMaster,

Please check these forum threads that discuss a functionality similar to the one you want to achieve: 

• https://www.telerik.com/forums/skip-read-only-fields-when-using-keyboard-navigation-on-navigatable-grid-in-batch-edit-mode
• https://stackoverflow.com/questions/20853104/how-to-catch-kendo-grid-cell-out-of-focus-event

You have to use the saveChanges method when pressing the arrow key and moving to the next Grid cell.

Regards,
Petar
Progress Telerik

[NoobMaster]

Hi Petar

thanx for your replay .

 

i have check your links before but didn't help me

actually i don't want to save changes to server while pressing down or up arrows. 

just i want to have the small red thing on the cell after going to next cell by the arrows.

because now when i putting a value to cell A then i press down arrow and finally my cell A will be empty , its like you didnt put any value to cell A.

 

i did a trick by calling

grid.table.focus()

 before activating next cell and i get what i want. but by this way i got scroll issues like if you have a long table then by pressing arrows to navigate to next cell then the grid scroll stays at middle of the screen always.

so this trick is not a real solution to my problem.

i appreciate your help.

 

waiting for you :) 

 

Thanx

Ahmed

Regards 

[Petar]

Hi NoobMaster,

Can you send me the modified project in which you experience the reported behavior when applying the "trick"? If you don't want to publicly expose your code, you can submit a support ticket with the modified project and we will handle it. 

Regards,
Petar
Progress Telerik

[NoobMaster]

Hello Petar !

im sorry for late replay.

here is the Dojo link : Kendo Grid Batch Edit - Navigation by Arrows Demo

[Petar]

Hi NoobMaster,

A possible approach that will stop the Grid scrolling is to use the jQuery scrollTop method like it is demonstrated in this edited version of the Dojo you sent me. 

Here is the modified definition of the logic executed on "up" and "down" arrow keypress:

var currentCellIndex = current[0].cellIndex;
    var nextRow = current.parent().next();
    var nextCell = nextRow.find('td').eq(currentCellIndex);
    var scrollPosition = $(document).scrollTop();
    
    grid.table.focus();

    grid.current(nextCell);
    grid.editCell(nextCell[0]);
    $(document).scrollTop(scrollPosition);

Let me know if the proposed approach resolves your issue.

Regards,
Petar
Progress Telerik

[NoobMaster]

Hi Petar.

your solution worked very good.

but in down arrow the scroll is not moving when you got end of the page ( not the table records )

i have updated the Dojo demo , please check it.

Thanks in Adcance

 

Ahmed

Regards

[Petar]

Hi NoobMaster,

You can check this Dojo example. It demonstrates how we can achieve the desired scrolling when the "arrow down" is pressed.

Now if you press the "arrow up" and then the "arrow down" the Grid will start to scroll down but the offset of the "last field" to the bottom of the window will be different from the initial one. You can compensate this offset by implementing a similar to the proposed implementation but in the "arrow up" logic. 

If we talk in general, you can implement a logic that gets the current position of the active Grid cell and move the page's scroll according to the cell's position on the page. 

Regards,
Petar
Progress Telerik

[NoobMaster]

Thank you very much.

now everything is working perfectly

 

:)