Keyboard Navigation insided grid columns

4 posts, 0 answers
  1. Ramesh kumar Kuppusamy
    Ramesh kumar Kuppusamy avatar
    36 posts
    Member since:
    Apr 2010

    Posted 21 Mar 2011 Link to this post


    In my senario, I have to set the keyboard navigation between the same Grid Row Columns and Grid Columns.

    In the below specified sample grid, if the user select the catid checkbox  and then he press the Right Arrow key, the focus will automatically goes to catname checkbox , again if the user press the Right Arrow key then the focus will automatically goes to description checkbox.

    Similarly I have to use the Left Arrow key & UP/ Down key in the grid

    Is this is possible in radgrid keyboard navigation option, if not provide some alternative option.

    catid catname description
  2. Galin
    Galin avatar
    526 posts

    Posted 24 Mar 2011 Link to this post

    Hi Ramesh,

    RadGrid does not support exactly the same scenario, but I made a custom solution with the following javascript:
        $.expr[':'].focus = function(a){ return (a == document.activeElement); }
        var inputsArray = new Array;
        inputsArray = $("#GridView1 input");
        inputsPerRow = 3; // Set how many input items are per row
        $('#GridView1 ').keydown(function(e){
            var keyCode = e.which;
            if (keyCode>36 && keyCode<41) {
                var curFocus = jQuery.inArray($("#GridView1 .:focus")[0], inputsArray); //current focus input
                if (keyCode==37 || keyCode==39){ // pressed Left/Arrow key
                     newFocus = curFocus + keyCode - 38;
                     if(newFocus>=0 && newFocus < inputsArray.length)
                     else if(newFocus<0)
                         inputsArray[inputsArray.length -1].focus();
                else { // pressed Up/Down key
                     newFocus = curFocus + (keyCode - 39)*inputsPerRow;
                     if(newFocus>=0 && newFocus < inputsArray.length)

    You can find it in the attached archive.

    Also if this does not help you can take a look at the solution provided in this code library.

    Best wishes,
    the Telerik team
  3. DevCraft R3 2016 release webinar banner
  4. Dhivagar
    Dhivagar avatar
    1 posts
    Member since:
    Dec 2014

    Posted 23 Dec 2014 in reply to Galin Link to this post

    Hi Galin,
                    I got a telerik Radgrid in my Application, I want to move across the grid like EXCEL. is that possible , please see the Attached.
  5. Eyup
    Eyup avatar
    2941 posts

    Posted 26 Dec 2014 Link to this post

    Hi Dhivagar,

    In case you decide to use Batch editing:

    You can make avail of the built-in keyboard navigation with the Tab and Shift+Tab key respectively. If you want to further customize the arrow keys behavior, you can try the following approach, however, please keep in mind that this requirement is too specific and beyond our support niveau:
    Telerik.Web.UI.GridBatchEditing.prototype._handleKeyboardNavigationOrg =
    Telerik.Web.UI.GridBatchEditing.prototype._handleKeyboardNavigation = function (e) {
        if (e.keyCode == ?) { // right arrow key
            e.keyCode = 9; // simulate Tab

    Hope this helps.


    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top