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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

There is no way to sort/remove groupings using the keyboard

Thread ID:





121762 Jan 22,2016 11:39 AM UTC Jan 26,2016 05:57 AM UTC JavaScript 3
Tags: ejGrid
Greg Gannicott
Asked On January 22, 2016 11:39 AM UTC


We're attempting to make our application as accessible as possible, so that all functionality can be accessed via only the keyboard.

Are there keyboard shortcuts that can be used to sort and remove groupings on the grid?

If there are not, is this something that can be added?

Many thanks. 

Sellappandi Ramu [Syncfusion]
Replied On January 25, 2016 07:20 AM UTC

Hi Greg,

Thank you for contacting Syncfusion support.

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

Sample Link: http://jsplayground.syncfusion.com/vaiacbcp

$(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 + G
Perform Grouping
Shift + U
Perform UnGrouping
Shift + Right Arrow
Move Header cell right
Shift + Left Arrow
Move Header cell left
Clear sorting and grouping
Move Header cell right

Sorting is performed by using the SortColumn method in Grid.

Please refer to online help documentation,

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 online help documentation,

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

Grouping and ungrouping performed by using groupColumn and ungroupColumn method in Grid. Please refer to the online help documentation,

Document: http://help.syncfusion.com/js/api/ejgrid#methods:groupcolumn

Document: http://help.syncfusion.com/js/api/ejgrid#methods:ungroupcolumn

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

                    if (e.shiftKey) {

                         . . . . . 

                                if (e.keyCode == 71 && !ej.isNullOrUndefined(field)) {  //G Key



                                if (e.keyCode == 85 && !ej.isNullOrUndefined(field)) {  //U Key


                                                cell = obj.getHeaderTable().find("th.e-headercell") [obj.getColumnIndexByField(field)];



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.

Sellappandi R

Greg Gannicott
Replied On January 25, 2016 09:27 AM UTC

Thanks for the prompt and detailed response.

We'll give this a try.


Balaji Marimuthu [Syncfusion]
Replied On January 26, 2016 05:57 AM UTC

Hi Greg,

Thanks for the update.

Please give a try and get back if you need any further assistance.
Balaji Marimuthu


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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