Keyboard Navigation insided grid columns

7 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

    Hi

    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
    Admin
    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:
    $(function(){       
        $.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)
                         inputsArray[newFocus].focus();
                     else if(newFocus<0)
                         inputsArray[inputsArray.length -1].focus();
                     else
                         inputsArray[0].focus();
                }
                else { // pressed Up/Down key
                     newFocus = curFocus + (keyCode - 39)*inputsPerRow;
                     if(newFocus>=0 && newFocus < inputsArray.length)
                         inputsArray[newFocus].focus();
                }
            }
        })
    })

    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,
    Galin
    the Telerik team
  3. 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.
  4. Eyup
    Admin
    Eyup avatar
    3801 posts

    Posted 26 Dec 2014 Link to this post

    Hi Dhivagar,

    In case you decide to use Batch editing:
    http://demos.telerik.com/aspnet-ajax/grid/examples/data-editing/batch-editing/defaultcs.aspx

    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;
    Telerik.Web.UI.GridBatchEditing.prototype._handleKeyboardNavigation = function (e) {
        if (e.keyCode == ?) { // right arrow key
            e.keyCode = 9; // simulate Tab
        }
        this._handleKeyboardNavigationOrg(e);
    };

    Hope this helps.


    Regards,
    Eyup
    Telerik
     

    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.

     
  5. VIRUX
    VIRUX avatar
    24 posts
    Member since:
    Sep 2009

    Posted 08 Jul Link to this post

    Apologies if I am not allow to resume or hijack older thread.

    How to know the keyboard source ( eg: NUM pad ENTER KEY , e.Location on normal event).

    I have tried e.Location from batch prototype but is not available on e.

    Require condition is only allow to use enter key from numpad while data entry at batch edit grid to move to next, so i need to know num pad enter key. Thanks in advance.

     

     var $ = $telerik.$;
    Telerik.Web.UI.GridBatchEditing.prototype._handleKeyboardNavigationOrg = Telerik.Web.UI.GridBatchEditing.prototype._handleKeyboardNavigation;
                Telerik.Web.UI.GridBatchEditing.prototype._handleKeyboardNavigation = function (e) {
                    if (e.keyCode == 39) { // right arrow
                        e.keyCode = 9;
                    }
                    else if (e.keyCode == 37) {
                        e.keyCode = 9;  // tab
                        e.shiftKey = true;
                    }
                    else if (e.keyCode == 13) {  // enter key, ,, e.Location = nan                
                        e.keyCode = 9;  // tab
                    }
                    var batMan = this; // just reference, no use
                    this._handleKeyboardNavigationOrg(e);
                };

  6. Eyup
    Admin
    Eyup avatar
    3801 posts

    Posted 11 Jul Link to this post

    Hello,

    The forums are for discussion by our community. I hope this info will prove you helpful:

    You can achieve this requirement using the following approach:
    if (e.keyCode == 13 && e.rawEvent.location == 3) {
        alert("Numpad Enter Pressed");
    }

    Regards,
    Eyup
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  7. Mayte
    Mayte avatar
    1 posts
    Member since:
    Jul 2019

    Posted 15 Jul Link to this post

    nice
Back to Top