Is there a way to set the tab index of different kendo ui controls on the same page?
I have several widgets on one page (2 textboxes, 1 dropdownlist, 5 grids, and 3 buttons). Is there a way to set the tab index so I hit each control in order from top to bottom, left to right, including into and out of the grids? currently hitting the tab key seems to be going through controls at random, sometimes not hitting a control at all. I am using the kendo UI for html5 and javascript.
I have several widgets on one page (2 textboxes, 1 dropdownlist, 5 grids, and 3 buttons). Is there a way to set the tab index so I hit each control in order from top to bottom, left to right, including into and out of the grids? currently hitting the tab key seems to be going through controls at random, sometimes not hitting a control at all. I am using the kendo UI for html5 and javascript.
6 Answers, 1 is accepted
0
Accepted
Hi,
In order to specify the tab order of the controls on the page I would suggest to use the tabindex attribute (example). Keep in mind that once the grid is focused and the Tab key is pressed again, the grid loses focus and the next focusable element on the page is focused.
Regards,
Iliana Nikolova
Telerik
In order to specify the tab order of the controls on the page I would suggest to use the tabindex attribute (example). Keep in mind that once the grid is focused and the Tab key is pressed again, the grid loses focus and the next focusable element on the page is focused.
Regards,
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
JCSCo
Top achievements
Rank 1
Rank 1
answered on 19 Aug 2014, 07:33 PM
Thanks, that was what I was looking for.
0
JCSCo
Top achievements
Rank 1
Rank 1
answered on 28 Aug 2014, 07:04 PM
Hi Iliana,
I am still having some issues with this. I can successfully tab between the controls, but when I get to a grid, I cannot use the keyboard to traverse the grid and click on cells for editing. The only button that works is the tab, which takes me to the next grid. I need to be able to edit cells in the grid via keyboard navigation. Any help would be appreciated.
Thanks
I am still having some issues with this. I can successfully tab between the controls, but when I get to a grid, I cannot use the keyboard to traverse the grid and click on cells for editing. The only button that works is the tab, which takes me to the next grid. I need to be able to edit cells in the grid via keyboard navigation. Any help would be appreciated.
Thanks
0
Hi,
In order to be able to edit cells in Kendo UI Grid via keyboard navigation you should configure the Grid as editable and navigatable (updated example). Note that by design the Grid widget will be focused when Alt+W is pressed (online demo).
Regards,
Iliana Nikolova
Telerik
In order to be able to edit cells in Kendo UI Grid via keyboard navigation you should configure the Grid as editable and navigatable (updated example). Note that by design the Grid widget will be focused when Alt+W is pressed (online demo).
Regards,
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
JCSCo
Top achievements
Rank 1
Rank 1
answered on 02 Sep 2014, 09:51 PM
Hi Iliana,
I already had editable and navigatable set to true. This chunk of code in your updated example fixed it for me for one grid:
I notice that this references document.body and calls focus to the grid whenever alt+w are pressed. This is fine for one grid but I have 6. Is there a way to call this seperately for each grid, or do I need to assign a different hot key for each grid?
Thanks
I already had editable and navigatable set to true. This chunk of code in your updated example fixed it for me for one grid:
$(document.body).keydown(function (e) { if (e.altKey && e.keyCode == 87) { $("#grid").data("kendoGrid").table.focus(); } });I notice that this references document.body and calls focus to the grid whenever alt+w are pressed. This is fine for one grid but I have 6. Is there a way to call this seperately for each grid, or do I need to assign a different hot key for each grid?
Thanks
0
Hi,
You should configure the keyboard navigation for the grids as per your requirements using custom JavaScript. For example define different key combinations for focusing each of the grids.
Regards,
Iliana Nikolova
Telerik
You should configure the keyboard navigation for the grids as per your requirements using custom JavaScript. For example define different key combinations for focusing each of the grids.
Regards,
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!