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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

120179 Sep 8,2015 11:14 AM UTC Sep 9,2015 09:06 AM UTC JavaScript 1
loading
Tags: ejGrid
Rakesh Advani
Asked On September 8, 2015 11:14 AM UTC

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 [Syncfusion]
Replied On 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

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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;