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

tab navigate muliple inputs in EditorTemplate

3 Answers 11 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jimmy
Top achievements
Rank 1
Veteran
Jimmy asked on 22 Dec 2020, 10:48 AM

Hi

 

I have a navigable in-cell edit grid with a particulate column using EditorTemplate.

There are 3 inputs in this template, but I cannot tab navigate through this 3 inputs.

When I enter tab key, it will close this cell and jump to next column edit.

I need to be able to tab edit through all columns and also tab through all inputs in this particular column.

Please advice how i can achieve this.

Thanks in advance!

3 Answers, 1 is accepted

Sort by
0
Tsvetomir
Telerik team
answered on 25 Dec 2020, 07:24 AM

Hi Jimmy,

The navigatable option of the Kendo UI Grid works by handling the keydown event. It checks whether the pressed key is "TAB" and if it is, it looks for the first editable cell. When the cell enters edit mode, the first focusable input element is selected. However, when the user tabs again, the grid searches for the next editable cell. 

What I can recommend in order to handle the custom navigation through multiple input elements is that you handle the keydown or keypress jQuery events, prevent the default propagation of the event and handle the focus on your own. 

I hope you find this helpful.

 

Kind regards,
Tsvetomir
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Jimmy
Top achievements
Rank 1
Veteran
answered on 28 Dec 2020, 01:06 AM
Thanks Tsvetomir. Just wonder if you have any sample code?
0
Accepted
Tsvetomir
Telerik team
answered on 30 Dec 2020, 01:32 PM

Hi Jimmy,

At present, I do not have a ready-to-use example that achieves the same. However, I can recommend an approach to handle the keydown event and stop the default functionality. Namely, within the dataBound event handler:

function dataBound(e){
            	$(e.sender.tbody).on("keydown", function(ev){
              	ev.stopImmediatePropagation();
                // implement custom logic
              });
            }

 

Kind regards,
Tsvetomir
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Jimmy
Top achievements
Rank 1
Veteran
Answers by
Tsvetomir
Telerik team
Jimmy
Top achievements
Rank 1
Veteran
Share this question
or