First grid row is not selected when grid's data area gains focus

[Greg Gannicott]

Hello.

This may be subjective, but when tabbing the focus on to the grid, and the focus reaches the point where it's the area containing the rows themselves which has focus, we expect the first row to show as selected (this isn't the case). The user would  then be able to select a row without any additional keys (eg. ctrl + home). This feels more intuitive and reduces the need to inform the user that ctrl + home exists..

Is this something that can be incorporated into the product?

Many thanks.

[Ragavee U S]

Hi Greg,

We have created a sample based on your requirement to select the first row of the Grid on pressing the tab key when focussing the Grid.

Demo Link: http://jsplayground.syncfusion.com/4rsmw2pd

In the above link, we have set the key for firstRowSelection as tab key using the keySettings property of the Grid. Please refer to the below api reference documentation.

http://help.syncfusion.com/js/api/ejgrid#members:keysettings

Refer to the code example.

<script type="text/javascript">

        $(function () {

            $("#Grid").ejGrid({

                . . . .

               keySettings: { firstRowSelection: "9, ctrl+36" }, //9- tab key, 36 – home key

//by assigning multiple key values for a property in key settings, we can achieve multiple key support for a single operation

            });

</script>

Regards,
Ragavee U S.

[Greg Gannicott]

Hi.

Thanks for that.

We've tried this solution, but we have a some issues with it.

When you tab away from the control, it selects the first row (which is a side effect you'd expect based on the solution provided). This instantly felt wrong as a user (especially as our grid's viewport jumps to the top if the first row is selected).

As users when we exit the grid we'd expect the currently selected row to appear de-selected (whilst retaining the state of which row is selected), or dim to highlight the fact the grid does not have focus.

Then when the user tabs back into the grid again, it should return to the previously selected row.

As a result, the solution provided isn't something we can implement. Is this something that could be looked at further please?

Thanks.

[Ragavee U S]

Hi Greg,

We have prepared a sample based on your requirement to unselect the record when grid losts focus and select the record when gains focus.

Demo Link: http://jsplayground.syncfusion.com/jzhgjgof

In the above sample, we have saved the selectedRowIndex in a global variable and have cleared selection in grid upon focussing out the grid element. In focusin event of the grid, we have passed the index to the selectRows method of the ejGrid.

Please refer to the below code example.

<script type="text/javascript">

    $(function () {

        var index = 0;

        $("#Grid").focusin(function (e) {  //focusin event of the grid         

            index = index == -1 ? 0 : index;

            $("#Grid").ejGrid('selectRows', index); //select the row          

        })

        $("#Grid").ejGrid({

            . . . .

            dataBound: function () {

                this.element.focusout(function () { //focus out event of the grid

                    index = $("#Grid").ejGrid('model.selectedRowIndex'); //save the selectedRowIndex in a variable

                    $("#Grid").ejGrid('clearSelection'); //perform clear selection

                })

            },         

        });

    });

    </script>

Regards,
Ragavee U S.

[Greg Gannicott]

Hi.

Thanks for the response. It deals with many of our issues, however there is still one problem.

The following is present on the demo you provided:

1. User selects a row.
   
2. User clicks away from the grid.
   
3. User clicks back onto the grid (but selects a different row).
   

At this point it briefly highlights the previously selected row before selecting the new row. It's quite distracting.

This is demonstrated in the attached animated gif.

Are you able to resolve this please, whilst still de-selecting the row when the grid doesn't have focus?

Thanks.

Attachment: gridclicking_5da887d8.zip

[Gowthami V]

Hi Greg,

We have analyzed your issue "highlights the previously selected row before selecting the new row" and we found that the focusin event get triggered while selecting the row by using “mouse” also. So that only the previous row always selected while select the row using mouse.

We can resolve the above issue by using below code example,

  $(function () {

            var index = 0,isClick;

           //Binding click event to the grid

            $("#Grid").bind('click', function () {

                isClick = true;

            })

                //Binding keyup event to the grid

           .bind('keyup', function (e) {

            if (e.which == 9)

            {

                isClick = false;

            }

        });

            var focusHandler = function () {

                //prevent the record selection if the row selected through mouse clicked

                if (!isClick) {

                    index = index == -1 ? 0 : index;

                    $("#Grid").ejGrid('selectRows', index);

                }

            }

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

                //Timeout for triggering click and keyup events

                setTimeout(focusHandler, 200);
                });
   $("#Grid").ejGrid({
. . . .
. . . .

});

        });

    </script>

We have created modified a sample and it can be referred from below link,

http://jsplayground.syncfusion.com/alug2q5d

Regards,

Gowthami V.

[Greg Gannicott]

Thanks again for the solution.

Unfortunately, we're still encountering problems. Although the good news is, it's fresh a set.

Both are related to how it acts with the toolbar enabled.

Problem 1: Up/down keys also controlling focus in Toolbar

When we have the toolbar enabled, the following scenario occurs:

* User tabs on to the grid. As requested, it highlights the first row.

* User presses down and up to navigate the rows.

* At this point, the selected toolbar button also changes.

Problem 2: Tabbing out of grid doesn't occur on first attempt

Again, when we have the toolbar enabled, the following scenario occurs:

* User tabs on to the grid.

* User presses up/down to navigate the table (although not required to recreate this problem)

* User presses tab to exit the grid.

* The selector is briefly gone, before being displayed again.

* User presses tab again to exit the grid.

* This time it works.

Are you able to assist with this please?

Many thanks.

[Ragavee U S]

Hi Greg,

We have modified the sample resolving the reported issues, which can be downloaded from the below location.

Demo Link: http://jsplayground.syncfusion.com/40nfndt3

In the above sample, we have removed the tabindex attribute for the toolbar element in the jquery focusout event of the Grid. Please refer to the below code example.

dataBound: function () {

                    this.element.focusout(function () {

                        index = $("#Grid").ejGrid('model.selectedRowIndex');

                        $("#Grid").ejGrid('clearSelection');

                        $("div.e-gridtoolbar").removeAttr("tabindex");

                    }

                                         )
                }

Regards,
Ragavee U S.

[Greg Gannicott]

Hi.

That fixes the two issues I described, but appears to remove the ability for the user to access the menu using the keyboard.

Is this functionality (ie. the request made in the original post) something that could be integrated into the product itself rather than via the series of fixes which you have kindly provided? I'm concerned that the changes we are applying to alter the built in behaviour of the control will break at a later date when you update the control.

Thanks.

[Ragavee U S]

Hi Greg,

We considered this query “When tab key trigger from Grid content both Toolbar and Grid gets focused” as a bug and a support incident has been created under your account to track the status of this issue. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

As of now, we have prepared a workaround inorder to handle the above issue.

Demo Link: http://jsplayground.syncfusion.com/nnhkhr1f

In the above sample, we have prevented the row selection when the toolbar icons gains focus using a flag variable. Please refer to the below code example.

var focusHandler = function () {

        if (document.activeElement.id == "Grid_toolbarItems")

            flag = 1;

        else

            flag = 0;

        if (!isClick && flag == 0) {

            index = index == -1 ? 0 : index;

            $("#Grid").ejGrid('selectRows', index);

        }

    }

Regards,
Ragavee U S.

[Greg Gannicott]

Thanks.

I was hoping it was the "when tabbing the focus on to the grid, and the focus reaches the point where it's the area containing the rows themselves which has focus, we expect the first row to show as selected" aspect of this forum thread (the original reason it was created) would be considered for inclusion in the control, so there wasn't a need to include the series of workarounds you have provided.

Cheers,

[Ragavee U S]

Hi Greg,

If the grid gains focus, then the first row will not be selected. This is the behavior of the navigation keys. In order to select the first row on grid focus, we suggest you to use the keySettings property of the Grid.

But we considered this query “When grid gains focus, pressing the up/down navigation keys should navigate up or down the grid records” as a usability feature and a support incident has been created under your account to track the status of this feature.

It is the default behavior of any control to maintain its status when the control looses its focus. So it is not a proper approach to clear selection upon focusing out the grid control. But we have considered “Lighten the background color of the selected record when grid lost focus” as a usability feature and a support incident has been created under your account to track the status of this feature.

Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

Regards,
Ragavee U S.

[Greg Gannicott]

That's great news, thanks!

Thanks for being so patient.

[Ragavee U S]

Hi Greg,

Thanks for the update. Please follow up the incident for further updates.

Regards,
Ragavee