tab navigate muliple inputs in EditorTemplate

[Jimmy]

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!

[Tsvetomir]

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

[Jimmy]

Thanks Tsvetomir. Just wonder if you have any sample code?

[Tsvetomir]

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