How to select next row in an Angular UI grid?

Question

I have a selected row, and by clicking some button (currently I use space via AngularHotkeys.js) I want to deselect current row and select the one that is next after the currently selected one.

The thing is complicated more knowing that I can sort the table with different columns. So, it would be great to know index of the current row with the current sorting applied.

From where do I start with this problem?
Any suggestions are appreciated.

Answer 1

You can get the array of rows, in their sorted and filtered state, from $scope.gridApi.grid.renderContainers.body.visibleRowCache. There's also a bunch of trickiness to deal with when you have the entity and when you have the gridRow, so the code gets a little complex.

Your code would be something like:

$scope.selectNextRow = function() {
  var currentRowIndex;
  var selectedRows = $scope.gridApi.selection.getSelectedRows();
  if( selectedRows.length < 1 ){
    // if nothing selected, we'll select the top row
    currentRowIndex = -1;
  } else {
    // if there are multiple selected, we use the first one
    var selectedRow = selectedRows[0];
    var gridRow = $scope.gridApi.grid.getRow(selectedRow);
    currentRowIndex = $scope.gridApi.grid.renderContainers.body.visibleRowCache.indexOf(gridRow);
  }

  $scope.gridApi.selection.clearSelectedRows();
      $scope.gridApi.selection.selectRow($scope.gridApi.grid.renderContainers.body.visibleRowCache[currentRowIndex + 1].entity);
};

Refer http://plnkr.co/edit/Z7HCjVY6oxGJzyjLI6Qo?p=preview