tab navigate muliple inputs in EditorTemplate

4 posts, 1 answers
  1. Jimmy
    Jimmy avatar
    36 posts
    Member since:
    Jan 2019

    Posted 22 Dec 2020 Link to this post

    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!

  2.
  3. Tsvetomir
    Admin
    Tsvetomir avatar
    793 posts

    Posted 25 Dec 2020 Link to this post

    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/.

  5. Jimmy
    Jimmy avatar
    36 posts
    Member since:
    Jan 2019

    Posted 27 Dec 2020 in reply to Tsvetomir Link to this post

    Thanks Tsvetomir. Just wonder if you have any sample code?
  7. Answer
    Tsvetomir
    Admin
    Tsvetomir avatar
    793 posts

    Posted 30 Dec 2020 Link to this post

    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/.

  8.
Back to Top