How do I scroll an ngGrid to show the current selection?

Question

I\'m setting the selection of my ngGrid from JavaScript, calling gridOptions.selectItem(). I have multiSelect set to false, so there is only ever one row selected.

Answer 1

I found the accepted answer above is not working with the latest version of ui-grid (v4.0.4 - 2017-04-04).

Here is the code I use:

$scope.gridApi.core.scrollTo(vm.gridOptions.data[indexToSelect]);

In gripOptions, you need to register the gridApi in onRegisterApi.

onRegisterApi: function (gridApi) {
   $scope.gridApi = gridApi;
},

Answer 2

It sounds like you can make use of the scrollTop method for the scrolling.

See also http://github.com/angular-ui/ng-grid/issues/183 and the following plunker from @bryan-watts http://plnkr.co/edit/oyIlX9?p=preview

An example how this could work would be as follows:

function focusRow(rowToSelect) {
  $scope.gridOptions.selectItem(rowToSelect, true);
  var grid = $scope.gridOptions.ngGrid;
  grid.$viewport.scrollTop(grid.rowMap[rowToSelect] * grid.config.rowHeight);
}

edit:

For the second part of your question "disabling the mouse and keyboard events of the selected rows" it might be best to start a new Question. Sounds like you want to set your enableRowSelection dynamically to false? No idea if that's possible.

Answer 3

  var grid = $scope.gridOptions.ngGrid;
    var aggRowOffsetTop = 0;
    var containerHeight = $(".gridStyle").height() - 40;
    angular.forEach(grid.rowFactory.parsedData, function(row) {
        if(row.entity.isAggRow) {
            aggRowOffsetTop = row.offsetTop;
        }
        if(row.entity.id == $scope.selectedId) {
            if((row.offsetTop - aggRowOffsetTop) < containerHeight) {
                 grid.$viewport.scrollTop(aggRowOffsetTop);
            } else {
                grid.$viewport.scrollTop(row.offsetTop);
            }
        } 
    });

Answer 4

I believe I was looking for the same behavior from ng-grid as yourself. The following function added to your gridOptions object will both disallow selection via the arrow keys (but allow it if shift or ctrl is held down) and scroll the window when moving down the list using the arrow keys so that the currently selected row is always visible:

beforeSelectionChange: function(rowItem, event){
    if(!event.ctrlKey && !event.shiftKey && event.type != 'click'){
      var grid = $scope.gridOptions.ngGrid;
      grid.$viewport.scrollTop(rowItem.offsetTop - (grid.config.rowHeight * 2));
      angular.forEach($scope.myData, function(data, index){
        $scope.gridOptions.selectRow(index, false);
      });
    }
    return true;
  },

edit: here is a plunkr: http://plnkr.co/edit/xsY6W9u7meZsTJn4p1to?p=preview

Hope that helps!