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

Keyboard Navigation insided grid columns

6 Answers 94 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Ramesh kumar Kuppusamy
Top achievements
Rank 1
Ramesh kumar Kuppusamy asked on 21 Mar 2011, 07:24 PM
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

6 Answers, 1 is accepted

Sort by
0
Galin
Telerik team
answered on 24 Mar 2011, 03:51 PM
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
0
Dhivagar
Top achievements
Rank 1
answered on 23 Dec 2014, 06:10 AM
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.
0
Eyup
Telerik team
answered on 26 Dec 2014, 08:28 AM
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.

 
0
VIRUX
Top achievements
Rank 1
answered on 09 Jul 2019, 02:33 AM

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);
            };

0
Eyup
Telerik team
answered on 11 Jul 2019, 06:13 AM
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.
0
Mayte
Top achievements
Rank 1
answered on 15 Jul 2019, 06:32 AM
nice
Tags
General Discussions
Asked by
Ramesh kumar Kuppusamy
Top achievements
Rank 1
Answers by
Galin
Telerik team
Dhivagar
Top achievements
Rank 1
Eyup
Telerik team
VIRUX
Top achievements
Rank 1
Mayte
Top achievements
Rank 1
Share this question
or