Focus cannot be set on final column headers (using keyboard) when Grouping applied

[Greg Gannicott]

Hi.

We've encountered the following issue when attempting to use the grid using only the keyboard:

1. Use the keyboard to set focus on the grid within the grid.
   
2. With focus on the first column, use the Shift+g key combination to group the grid by this column.
   
3. Use the Shift+Right arrow key combination to move focus through the column headers, from right to left - it will not be possible to set focus on the last column header.
   
4. Leave the first grouping in place, and also apply an additional grouping.
   
5. Repeat step #3 - it will now, not be possible to set focus on the last 2 column headers.
   

Can you investigate please?

Thanks.

[Balaji Marimuthu]

Hi Greg,

Thanks for contacting Syncfusion support

Based on your requirement, we have created the sample and please find the sample in following link.

Sample: https://jsplayground.syncfusion.com/on4im4ga

$("#Grid").on("keydown", function (e) {

            var obj = $("#Grid").ejGrid("instance"), cell;

            var currentcell = obj.getHeaderTable().find(".e-activecell");

            var field = currentcell.find("div").attr("ej-mappingname");

            if (e.shiftKey) {

                if (e.keyCode == 37) {  //left arrow

                    var prevcell = currentcell.prev();

                    if (currentcell.index("th.e-headercell") != 0)

                        currentcell.removeClass("e-activecell") && prevcell.addClass("e-activecell");

                }

                if (e.keyCode == 39) {  //right arrow

                    var nextcell = currentcell.next();

                    if (currentcell.index("th.e-headercell") != obj.getHeaderTable().find("th.e-headercell").length - 1)

                        currentcell.removeClass("e-activecell") && nextcell.addClass("e-activecell");

                }

            }

           

        });

Regards,
Balaji Marimuthu

[Greg Gannicott]

Thanks for the quick response. We'll give that a try.

This strikes me as a bug in the software. I'd have thought you should be able to access the final columns without a need for additional code. Are there any plans to fix it in a future release?

That would be preferable to including the code you've provided.

Cheers.

[Sellappandi Ramu]

Hi Greg,

Thanks for the update and valuable feedback.

We have the getColumnIndexByField() method in grid to get the column index by using field name. So we can use getColumnIndexByField() method instead of using JQuery index() method in your sample.

Please refer to the code example, playground sample and online help documentation,

            if (e.shiftKey) {

                . . .

                if (e.keyCode == 37) {  //left arrow

                    var prevcell = currentcell.prev();

                    if (obj.getColumnIndexByField(field) != 0)

                        currentcell.removeClass("e-activecell") && prevcell.addClass("e-activecell");

                }

                if (e.keyCode == 39) {  //right arrow

                    var nextcell = currentcell.next();

                    if (obj.getColumnIndexByField(field) != obj.model.columns.length - 1)

                        currentcell.removeClass("e-activecell") && nextcell.addClass("e-activecell");

                }

            }

            if (e.keyCode == 9) {

               var nextcell = currentcell.next();

                if (obj.getColumnIndexByField(field) != obj.model.columns.length - 1)

                    currentcell.removeClass("e-activecell") && nextcell.addClass("e-activecell");

                if (currentcell.length > 0)

                    e.preventDefault();

            }
        });

Sample: https://jsplayground.syncfusion.com/40cnrmsx

Document: https://help.syncfusion.com/js/api/ejgrid#methods:getcolumnindexbyfield

Regards,
Sellappandi R