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

[Rakesh Advani]

Hello,

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,

Rakesh

[Balaji Marimuthu]

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
Escape	Clear sorting
Tab	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, 
http://docs.syncfusion.com/js/api/ejgrid#methods:clearsorting

$(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.

Regards, 
Balaji Marimuthu