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.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

121762 Jan 22,2016 06:39 AM Jan 26,2016 12:57 AM JavaScript 3
loading
Tags: ejGrid
Greg Gannicott
Asked On January 22, 2016 06:39 AM

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 [Syncfusion]
Replied On January 25, 2016 02:20 AM

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
Replied On January 25, 2016 04:27 AM

Thanks for the prompt and detailed response.

We'll give this a try.

Cheers.

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

Hi Greg,
 

Thanks for the update.

Please give a try and get back if you need any further assistance.
 
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.

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.

;