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.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

121782 Jan 25,2016 11:24 AM Jan 27,2016 04:12 AM JavaScript 3
loading
Tags: ejGrid
Greg Gannicott
Asked On January 25, 2016 11:24 AM

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 [Syncfusion]
Replied On January 26, 2016 07:12 AM


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: http://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
Replied On January 26, 2016 10:09 AM

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 [Syncfusion]
Replied On January 27, 2016 04:12 AM

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: http://jsplayground.syncfusion.com/40cnrmsx

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

Regards,
Sellappandi R

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.

;