Pre-Select rows on load with angular-ui-grid

Question

I want to select certain rows on page load(working days)

This is the plunker plnkr.co/edit/48NyxngWNGIlOps1Arew?p=preview

Any suggestion?

Murphree

Answer 1

Add the following property to your $scope.gridOptions object :

onRegisterApi: function(gridApi) {
    $scope.gridApi = gridApi;
    $scope.gridApi.grid.modifyRows($scope.gridOptions.data);
    $scope.gridApi.selection.selectRow($scope.gridOptions.data[0]);
}

This sets a $scope.gridApi so you can access it if you need it outside of this function.

You need to call the modifyRows method in order to be able to make changes to your rows.

Then the first row is selected (just as an example).

http://plnkr.co/edit/mvwlfaJiPDysbn2IrNpv?p=preview

To select the working days, maybe you can try replacing the last line by something like this :

$scope.gridOptions.data.forEach(function (row, index) {
    if (row.isWorkingDay()) {
        $scope.gridApi.selection.selectRow($scope.gridOptions.data[index]);
    }
});

row.isWorkingDay can simply check if the day is among a list of given days.

If your data is loaded by an async call you can simply select the rows in the callback :

asyncCall.then(function (data) {
    $scope.gridOptions.data = data;
    $scope.gridApi.grid.modifyRows($scope.gridOptions.data);
    $scope.gridApi.selection.selectRow($scope.gridOptions.data[0]);
});

Coycoyle

onRegisterApi: function(gridApi) { $scope.gridApi = gridApi; $scope.gridApi.grid.modifyRows($scope.gridOptions.data); $scope.gridApi.selection.selectRow($scope.gridOptions.data[0]); } This not work for me, the first row is not selected – Murphree

maybe is because i set the data after an async call? – Murphree

Yes, that may be the case. You can simply move the code that modifies and select rows in your async call callback and use $scope.gridApithere since you saved it in the onRegisterApi function. check my edit – Coycoyle

Works nicely. If data comes in async then placing the ui-grid inside a directive on which you declare ng-if="data" may help. – Itol

@Coycoyle would you have a look to this question? – Sprue

Answer 2

I found the accepted answer did not work reliably. Using the ui-grid inside a component, and setting gridOptions.data to a property bound to the component, api.grid.modifyRows() threw an exception because the columns had not been created which is done in the ui-grid dataWatchFunction.

Here is what worked for me. Maybe it can help someone else.

gridOptions =
  {
  /*--------------------------------------------------------*/
  /* `data` Property - Sets/Returns `rawData`. Setter calls */
  /* `selectRows()` to select rows from the loaded items.   */
  /*                                                        */
  /* If `onRegisterApi()` has not been executed, the API is */
  /* not available and the grid has not been configured.    */
  /* `selectRows()` is called in `onRegisterAPI()`.         */
  /*--------------------------------------------------------*/
  get data()     { return (this.rawData || (this.rawData = [])); },
  set data(data) 
    { 
    this.rawData = data;
    if (this.api)
      this.selectRows(this);
    },

  /*------------------------------------------------*/
  /* Select rows for the initial setting of `data`. */
  /*------------------------------------------------*/
  onRegisterApi: function(api) 
    {
    this.selectRows(this);
    },

  /*------------------------------------------------------*/
  /* `selectRows` is called after the `data` property has */
  /* been updated and waits for a ROW data change event.  */
  /*------------------------------------------------------*/
  selectRows: function(self)
    {
    /*-------------------------------------------------------------*/
    /* Register handler to select rows on next ROW event that have */
    /* `IWantSelected` set `true`. Deregister after execution.     */
    /*-------------------------------------------------------------*/
    var deregister = self.api.grid.registerDataChangeCallback(function(grid) 
      {
      self.data.filter(function(item) { return item.IWantSelected; }).some(function(item)
        {
        self.api.selection.selectRow(item);
        });
      deregister();
      }, [uiGridConstants.dataChange.ROW]);
    }
  };

Gallican