We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to get focus to grid header and enable sorting with keyboard?


I am using syncfusion grid with AngularJS and MVC. I have applied sorting to grid columns. every thing is working fine with sorting. but problem is that i can't find any way to apply keyboard navigation to grid header for sorting.

I want sorting of grid using keyboard.because keyboard navigation is our strong key feature for our project.

I have also bind data with back-end link to grid so i created one JS-Playground so you can better understand our requirements.

you can check this link : JSPlayGround Link

Many thanks,

1 Reply

BM Balaji Marimuthu Syncfusion Team September 9, 2015 09:06 AM UTC

Hi Rakesh

Thank you for contacting Syncfusion support.

Your requirement can be achieved by using the keydown event in jquery. Please refer to the following sample and code example, 

Sample: angular
JSplayground link: http://jsplayground.syncfusion.com/vmw2xb2e

$(document).on("keydown"function (e) {

            if (e.altKey && e.keyCode === 74) { // j- key code.
                        $("#integratorTemplateGrid").focus();  //focus grid


Please find the keys to perform sorting by using keyboard.

Alt + j

Focus the Grid

Shift + Home

First Header cell selection

Shift + End

Last Header cell selection

Shift + Up Arrow

Sorting in Ascending direction

Shift + Down Arrow

Sorting in Descending direction

Shift + Right Arrow

Move Header cell right

Shift + Left Arrow

Move Header cell left


Clear sorting


Move Header cell right

Sorting is performed by using the SortColumn method in Grid. Please refer to the following help document:http://docs.syncfusion.com/js/api/ejgrid#methods:sortcolumn

$("#integratorTemplateGrid").on("keydown"function (e) {

                    if (e.shiftKey) {

                         . . . . . 

                        if (e.keyCode == 38 && !ej.isNullOrUndefined(field)) {  //up arrow
                            obj.sortColumn(field, "ascending")

                        if (e.keyCode == 40 && !ej.isNullOrUndefined(field)) {  //down arrow
                            obj.sortColumn(field, "descending")


Sorting will be cleared when pressing the escape key by using the clearSorting method. Please refer to the following code example and help document, 

$(document).on("keydown"function (e) {

                    if (e.keyCode == 27) {  //Escape key
                        $("#integratorTemplateGrid").ejGrid("clearSorting");  //clear sorting
                        . . . .

The e-activecell class is added to the header cell when headercell is used (by using the keyboard keys only) to displays the selected cell and removed the e-activecell class when clicking the headercell using mouse. Please refer to the following code example,

$(document).on("mouseup"function (e) {  //mouseup
                    if ($(e.target).hasClass("e-headercelldiv")) {
                        var obj = $("#integratorTemplateGrid").ejGrid("instance");
                        var currentcell = obj.getHeaderTable().find(".e-activecell");
                        currentcell.removeClass("e-activecell");  //remove active cell

Note: By Default we have used the following keys like ctrl, Alt and Arrow keys to perform selection. So if you are customizing the same keys the default operation will be override.

Balaji Marimuthu

Live Chat Icon For mobile
Up arrow icon