howto disable selection in ng-grid

Question

Is it possible to "disable" or lock the selection of a ng-grid using the inbuilt functionality? I want the user to be able to select a row, click a button and then the grid will stay locked until the user presses another button.

Solution 1

Yes, you can return false from beforeSelectionChange to disable changing the selected rows on the grid.

$scope.option = {
    enableRowSelection: true,
};
$scope.gridOptions = {
    data: 'myData',
    beforeSelectionChange: function() {
      return $scope.option.enableRowSelection;
    }
    //, ...
};

HTML:

<button ng-click="option.enableRowSelection=false">Freeze Selection</button>
<button ng-click="option.enableRowSelection=true">Unfreeze Selection</button>
<div class="gridStyle" ng-grid="gridOptions"></div>

Example Code: http://plnkr.co/edit/PbhPzv?p=preview

See also: https://github.com/angular-ui/ng-grid/wiki/Configuration-Options

Solution 2

This works in Angular 2.3:

  constructor() {
    this.gridOptions = <GridOptions>{};
    this.gridOptions.suppressCellSelection = true;
  }

Comments

[Tim]

That works, but now ive realized i need to move some input boxes out of the div where the grid is built so they arent locked, problem is i dont think they have access to the scope of the grid outside of there, is it possible to pass the scope out? The use case is being able to edit the current selected row, after pressing an edit button.

[user508994]

Yes, it is possible to find the grid scope and pass it to another function and then call $gridScope.apply, but might be easier to edit the the gridOptions.data directly instead. Changes to the data (myData in the example above) usually automatically show up in the grid.

[Andy King]

You may also need gridOptions.suppressRowClickSelection.