This is a migrated thread and some comments may be shown as answers.

Tabbing with tabindex attribute in Grid

6 Answers 1107 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Artem
Top achievements
Rank 1
Artem asked on 30 Sep 2013, 04:03 PM
Is there a way to enable tabbing with html attribute tabIndex  on Grid paging controls (highlighted on the picture)?
The thing is that those elements (previous/next page, last/first page and page numbers) have tabIndex attribute explicitly set to -1.
Is there a way to change this behavior via API and what is the reason of specifying tabIndex in such a way that controls are excluded from tabbing sequence?

6 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 02 Oct 2013, 10:36 AM
Hello Artem,

The idea of the current Grid tabbing implementation is that once the widget is focused, the user can execute various actions with various buttons, but once the Tab key is pressed again, the Grid loses focus in favour of the next focusable element on the page. This is done on purpose, so that all the Grid content does not have to be tabbed through by the user, if (s)he wants to just skip the Grid.

While the Grid is focused, paging can be used via the PageUp and PageDown keys.

If you insist on allowing the users to tab through the pager buttons, you can remove their tabindex attributes via Javascript after initializing the Grid.

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tracy
Top achievements
Rank 1
answered on 26 Feb 2014, 12:30 AM
Hi,

I have the same issue.  It doesn't appear that I can use the navigatable setting for the grid because we have controls (checkboxes and drop down lists) that are always visible inside the grid and the keyboard navigation doesn't allow the user to access those controls.  So we're just turning the navigation off and letting people use their standard controls for keyboard navigation.  

My problem is detecting when the grid is fully loaded and in the DOM - but even more importantly, when the grid or its buttons are refreshed (as happens when you click one of the pagination buttons).  I can change the tabindex after the grid has been created when the page first loads, but how do I detect when the grid buttons are done being refreshed?  Doing this inside the dataBound event doesn't work as the buttons' tabindex is apparently set after the dataBound event fires.

Thanks,

Tracy
0
Dimo
Telerik team
answered on 26 Feb 2014, 07:33 AM
Hello Tracy,

The pager also uses the databound event to refresh its buttons. If you subscribe to the event while initializing the Grid, your handler will be attached first and executed before the pager's refresh. If you subscribe to the event after the Grid has been initialized, your handler will be attached second and executed after the pager's refresh.

http://docs.telerik.com/kendo-ui/getting-started/widgets#example---subscribe-to-an-event-using-the-bind-method

An alternative method is to use setTimeout in the Grid's dataBound handler. The timeout period doesn't matter.

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tracy
Top achievements
Rank 1
answered on 26 Feb 2014, 09:42 PM
Thank you Dimo,

I tried using the bind to dataBound solution first, but it didn't work - at least not for tabindex, which appears to still be happening after the dataBound event finishes firing.  I'm using setTimeout inside bind to dataBound and that's fixed it.

Thank you,

Tracy
0
Antje
Top achievements
Rank 1
answered on 28 Feb 2014, 03:07 PM
Hi,

I want to skip cells in "inline"-edit mode, that are readonly. 

How can I do this? I tried to set tabindex="99999" in the <td>-Tag, but that didn't change the tab behaviour. 

Thanks a lot
0
Dimo
Telerik team
answered on 28 Feb 2014, 03:35 PM
Hello Antje,

I am afraid this behavior is currently not supported, sorry about that.

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Artem
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Tracy
Top achievements
Rank 1
Antje
Top achievements
Rank 1
Share this question
or