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

[Greg Gannicott]

Hi.

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]

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
Escape	Clear sorting and grouping
Tab	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

                                                obj.groupColumn(field)

                                }

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

                                                obj.ungroupColumn(field)

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

                    $(cell).addClass("e-activecell");

                                }
                        
                });

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, 
Sellappandi R

[Greg Gannicott]

Thanks for the prompt and detailed response.

We'll give this a try.

Cheers.

[Balaji Marimuthu]

Hi Greg,
 
Thanks for the update.

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