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.
Syncfusion Feedback

Focus Indicator goes missing when tabbing into control

Thread ID:

Created:

Updated:

Platform:

Replies:

121752 Jan 21,2016 03:31 PM UTC Jan 25,2016 12:08 PM UTC JavaScript 3
loading
Tags: ejGrid
Greg Gannicott
Asked On January 21, 2016 03:31 PM UTC

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 [Syncfusion]
Replied On January 22, 2016 09:20 AM UTC

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
Replied On January 22, 2016 09:41 AM UTC

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 [Syncfusion]
Replied On January 25, 2016 12:08 PM UTC

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

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.

Warning Icon 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.Close Icon

;