Focus Indicator goes missing when tabbing into control

[Greg Gannicott]

If a control prior to the grid has focus, and the user presses tab, the focus indicator is no longer visible.

If the user then presses tab again, the indicator is visible on the grid.

At the time the indicator goes missing, it appears to be associated with the grid.

We believe users should know where the indicator is at all times.

Could you take a look at this please?

Many thanks.

[Jayaprakash Kamaraj]

Hi Greg,

Please share the following information to reproduce the issue:
                                                                                

1.      Code example of Grid with its siblings and parent element.

2.      If possible, provide a working sample.

Regards,

Jayaprakash K.

[Greg Gannicott]

Hi.

You'd be surprised how much effort is involved in providing what you ask :-)

What I can do instead though is provide this slight modification to one of your demos:

http://jsplayground.syncfusion.com/hsd20ry1

I've modified it as follows:

- I've added the following style selector so that any element that can take focus will display a blue dashed line: *:focus { border: 1px dashed blue; }

- Added a text input box above the grid.

So to recreate the problem:

1) give the new text box focus by clicking into it.

2) press tab. This will display a dashed box around the grid, highlighting that it has focus.

3) press tab. This will now show that the 'New' button has focus.

Without the *:focus selector I added, the element which takes focus in step 2 would not show as focused. This is where the focus indicator goes missing in our app, and it's at this point that the user can get confused with regards to the location of the current focus point.

Ideally, nothing at all should take focus at that point, and it should go directly to the Add button. Of course, there maybe reasons why you need it to take focus there.

Cheers.

[Mohammed Farook J]

Hi Greg,

Thanks for contacting Syncfusion supports.


We have validate your requirement , In grid every operation is performed based on the Grid element. So initially Grid element is focused. This is default behavior . After only, the remaining element will be focused to perform corresponding operation. But we have achieved your requirement by workaround as follows:

    <div id="Grid"></div>

   

    <script type="text/javascript">

    $(function () {

        $("#Grid").ejGrid({

            // the datasource "window.gridData" is referred from jsondata.min.js

            dataSource: window.gridData,

            allowPaging: true,

            dataBound:function(args){

                this.element.removeAttr('tabindex')

            },

.. .

    );

    $("#sampleProperties").ejPropertiesPanel();

   function onSelectionTypeChange(args) {

        $("#Grid").ejGrid("cancelEdit");

        $("#Grid").ejGrid("model.editSettings.rowPosition", args.selectedValue);

    }
    </script>

In above code snippet we have skipped the tab action through “dataBound” event of Grid. The “dataBound” event is triggered when successfully rendered  data in Grid. Please find the documentation link for ‘dataBound’ as follows:

dataBound : http://help.syncfusion.com/js/api/ejgrid#events:databound


For your convenience we have added the sample and find the following link:

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/WEEA97~11566389404.ZIP


Please let us know if you have any queries.

Regards,
J.Mohammed Farook