jQuery UI Widgets Forums Grid Grid tabbing handlekeyboardnavigation

This topic contains 3 replies, has 2 voices, and was last updated by  svetoslav_borislavov 2 months, 3 weeks ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Grid tabbing handlekeyboardnavigation #122435

    robf
    Participant

    Hello,
    I can’t seem to find a good answer on the forum for handlekeyboardnavigation in a grid when one of the columns in NOT editable.

    I have a grid with 4 columns – only the last column is editable. If I simply tab through the columns every cell is hit – that’s ok, although I would prefer that only editable columns are tabbed into. The bigger issue is when I actually EDIT a value in that 4th column, and then press tab — the focus is taken completely out of the grid and goes to another element on the page form.

    1) how to a I keep focus inside the grid and continue tabbing to next column?
    2) is there a way to only tab through editable columns?

    Thanks in advance!
    Rob

    Grid tabbing handlekeyboardnavigation #122440

    Hi,

    You can play with the handlekeyboardnavigation function.
    You can check which cell is currently selected and if the next cell is not editable you will select the first editable.
    Here is a demo of getting the selected cell and the pressed key :http://jsfiddle.net/sdya9Lfj/
    This demo can be your starting point for playing with the navigation.

    Best regards,
    Svetoslav Borislavov

    jQWidgets Team
    https://www.jqwidgets.com/

    Grid tabbing handlekeyboardnavigation #122483

    robf
    Participant

    Hi Svetoslav,
    Thanks for the feedback. The issue is more prevalent when there are other tabbable elements on the page – e.g. buttons. In the demo you gave, I added two button elements

    <button >Save</button>
    <button >Cancel</button>

    You will now notice that if you are tabbing in the grid and begin editing the quantity cell, and then tab, the focus leaves the grid and puts focus on the first (save) button. Even when adding <button tabindex="-1">Save</button> this will prevent it from tabbing to the button, but tab instead to some other tabbable field – e.g. anchor tag. The question is how to keep the focus inside the grid when I am in the middle of editing? I would imagine the use case is very common for anyone editing a large grid.

    Any more thought or ideas on this?

    http://jsfiddle.net/rfossella/zLq132ja/10

    Thanks
    Rob

    • This reply was modified 2 months, 3 weeks ago by  robf.
    Grid tabbing handlekeyboardnavigation #122491

    Hi,

    Yes to keep the focus you can use the handlekeyboardnavigation function to keep the focus in the grid.
    The function is called when a key is pressed. If the result of the function is true, the default keyboard navigation will be overridden for the pressed key. In the function, you can check whether the key is the tab and if so you will navigate to the next cell and return true to override the default behaviour.

    Best regards,
    Svetoslav Borislavov

    jQWidgets Team
    https://www.jqwidgets.com/

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.