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

Kendo Grid Override Keyboard Navigation

3 Answers 376 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Sibin
Top achievements
Rank 1
Sibin asked on 17 Dec 2020, 12:18 PM
Hi Team,
     I'm trying to override the some of the keyboard shortcuts for kendo grid.
What I need is to make the pageup/pagedown for top/bottom of screen and use home/end keys for start/end of dataset. Can you please suggest on how can I achieve this?

3 Answers, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 21 Dec 2020, 09:03 AM

Hi, Sibin,

I would recommend you to stick to the built-in navigation as it not only requires no custom logic it is tested and includes quite wide range of keyboard navigation options. It is designed based on the keyboard navigation of other similar components and it is probably going to be more intuitive for your clients.

As for overriding, you can find all event handlers which we use for the keyboard navigation in the source of the grid (kendo.grid.js file). The event handlers that are are called when the user presses the keys you have mentioned are _handlePageDown_handlePageUp, _handleHome and _handleEnd. To override them, you can define a new function that you want to be called when the user press the buttons that precedes the grid initialization:

kendo.ui.Grid.fn._handlePageUp = function(){ kendo.alert("pageup")};
kendo.ui.Grid.fn._handlePageDown = function(){ kendo.alert("pagedown")}; // the others functions can be overriden in the same way. /

/then initialize the grid
$("#grid").kendoGrid({

Kind Regards,
Alex Hajigeorgieva
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/.

0
Sibin
Top achievements
Rank 1
answered on 29 Dec 2020, 09:17 PM
Thank you. We have decided to use the default key combination. We just need to make one change. We need the up and down arrow to select the entire row, not just an individual cell. Individual cell selection doesn't make any sense in our use case. Can you please suggest how I can handle it?

I tried the below code, but works for only one key press. If I press up arrow 2 times, it only works one time. Should I call a focus function or something?
Thank you. 


kendo.ui.Grid.fn._moveUp = function (e, t) {
    this.select(e.parent().prev());
};
kendo.ui.Grid.fn._moveDown = function (e, t) {
    this.select(e.parent().next());
};
0
Sibin
Top achievements
Rank 1
answered on 31 Dec 2020, 11:33 AM
Figured out the issue. We can close this thread. Thank you for the support.
Tags
Grid
Asked by
Sibin
Top achievements
Rank 1
Answers by
Alex Hajigeorgieva
Telerik team
Sibin
Top achievements
Rank 1
Share this question
or