Navigating grid rows with up/down keyboard arrow keys

[alexandery]

Unless I'm missing something, I don't seem to be able to navigate rows in the grid using my keyboard. Is this supported? If so, what do I need to set to enable the functionality?

[PaulL1]

The cellNav feature is what enables navigation using the keyboard.

[alexandery]

@PaulL1

Thanks for you reply. However the cellNav feature is not what would enable me to navigate rows - it forces me to navigate cells (which confuses users :( - this is the biggest issue with this approach ) plus breaks my code by not reporting when a row selection has changed. Plus, in some cases I need to be able to select multiple rows which makes this more complicated.

Sure, I can use this workaround and adjust all grids to work with cellNav cell change event, but I believe that another feature (rowNav?) should be a part of the solution and take care of this functionality at a row level. What do you think?

[PaulL1]

That would be a potential addition, although there is an element of feature bloat that we get if we keep adding features for every little thing. The two options would be:

• someone to build a new 'rowNav' feature, which would be similar to cellNav but work on rows
• extend the cellNav feature to have a rowNav option, which changes the operation.

Probably the choice between the two would depend a little on how much shared logic there was.

[nippur72]

Can we have this issue marked as enhancement / feature? Focusing and navigating the whole row is very helpful as allows the ui-grid to be used as an enhanced substitute of the <select> tag.

I've played with cellnav.js and it seems to me that it needs to be changed only in one place (the logic being the same). In the CELL_NAV_EVENT instead of focusing when the cell matches, do focus when the row matches. Something like this:

            // rowNav = enables navigating by rows instead by cell
            if ((rowNav && rowCol.row === $scope.row) || 
               (!rowNav && rowCol.row === $scope.row && rowCol.col === $scope.col)) {
              setFocused();
              if(rowCol.col === $scope.col) {            
                // This cellNav event came from a keydown event so we can safely refocus
                if (rowCol.hasOwnProperty('eventType') && rowCol.eventType === uiGridCellNavConstants.EVENT_TYPE.KEYDOWN) {
                  $elm.find('div')[0].focus();
                }
              }
            }

[PaulL1]

I'm happy to reopen, and also happy to accept a PR with this functionality.

[longshot5112]

@nippur72 Where did you define rowNav?

[nippur72]

@longshot5112 for my test I hardcoded it manually e.g.var rowNav = true;

[smithscripts]

Has anyone had any luck implementing a solution for this yet. @nippur72 I've tried you suggestion and it seems to mostly work, but when you get to the bottom row the scrolling does not align with the row that is selected. Especially if you are holding down the down arrow key.

[alexandery]

@smithscripts Sorry, I sort of dropped this. Seemed like ui-grid guys were not interested in building this out and I simply didn't have time to invest into building it out myself. I'd love to have it, but it's a nice-to-have for me at this moment.

[chyzwar]

I would like to see this. UI Grid is perfect for me but I need to have elegant way to map rows to underlining models. In my case at least row navigation would be better because row in grid equal to model instance.

I will try maybe to implement this and do PR but I am struggling at Uni and my day-job is pushing for deadlines.

[gokhanoner]

Hi,

You can achieve this by doing below:

$scope.gridApi.cellNav.on.navigate($scope,function(newRowCol, oldRowCol){
  $scope.gridApi.selection.selectRow(newRowCol.row.entity);
})