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?

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]);
});

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]);
    }
  };