Kendo Grid Override Keyboard Navigation

4 posts, 0 answers
  1. Sibin
    Sibin avatar
    6 posts
    Member since:
    Sep 2020

    Posted 17 Dec 2020 Link to this post

    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?
  2.
  3. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 21 Dec 2020 Link to this post

    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/.

  5. Sibin
    Sibin avatar
    6 posts
    Member since:
    Sep 2020

    Posted 29 Dec 2020 Link to this post

    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());
    };
  7. Sibin
    Sibin avatar
    6 posts
    Member since:
    Sep 2020

    Posted 31 Dec 2020 in reply to Sibin Link to this post

    Figured out the issue. We can close this thread. Thank you for the support.
  8.
Back to Top