Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
hiroyuki shimada
65
Using arrow key to change selected row when grid focus by tab key.
posted

I have a grid with tabIndex =-1 (All row and cell inside can't be focus by [tab] key).

When I click on one row and press [up arrow] or [down arrow] key, the selected row is changed.

if I focus on the grid (not row or cell) by [tab] key and press [up arrow] or [down arrow] key there is no record in grid is selected.
-> How to trigger event for [up arrow/down arrow] key to select a row and change the selected row.

  • 3995
    Offline posted

    Hello,

     

    Setting tabindex to the grid will be applied to all cells and rows in it and. And when the value is -1 an element won't be reachable via sequential keyboard navigation. You can find more info on tabindex in MDN.

     

    You can bind to the keydown event and invoke selectCell or selectRow, depending on the selection mode.

     

    $( "#grid" ).keydown(function( event ) {

    if( event.key === "ArrowDown" ) {

    $( "#grid" ).igGridSelection( "selectRow", 0 );

    }

    }

     

    Here's a fiddle to demonstrate it.