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
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/.
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());
};