Angular ui-grid use selectedrow feature to control content of a row column

Question

I would like to the ui-grid row select feature to set the value of a column in the clicked row.

I have a column in the DB named omit. I would like that value to equal the state of the selected row, so if the row is selected then omit = 1, if row is not selected then omit = 0. I think I have this part figured out (however I'm always open to better ideas!).

gridApi.selection.on.rowSelectionChanged($scope,function(row){
        if(row.isSelected){
            row.entity.omit = 1;
        }
        if(!row.isSelected){
            row.entity.omit = 0;
        }
        // now save to database...
    });

    gridApi.selection.on.rowSelectionChangedBatch($scope,function(rows){
        angular.forEach(rows, function(value, key) {
           if(value.isSelected){
             value.entity.omit = 1;
           }
           if(!value.isSelected){
             value.entity.omit = 0;
           }
        // now save to database...
        });
  });

What I haven't been able to figure out is how the select the row when the grid is first loaded.

So, on the initial load of the grid, how do I select the row if the value of omit is 1?

Answer 1

You can use the gridApi.selection.selectRow method, but you have to wait until the grid has digested the data for it to work. So you either have to set it on an $interval (or after a $timeout) to keep running while the grid digests the data, or you can call gridApi.grid.modifyRows($scope.gridOptions.data) before you call selectRow... to be honest, I'm not sure why you have to call that.

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.selection']);

app.controller('gridCtrl', ['$scope', '$http', '$interval', 'uiGridConstants', function ($scope, $http, $interval, uiGridConstants) {
  $scope.gridOptions = { enableRowSelection: true, enableRowHeaderSelection: false };

  $scope.gridOptions.columnDefs = [
    { name: 'omit' },
    { name: 'id' },
    { name: 'name'},
    { name: 'age', displayName: 'Age (not focusable)', allowCellFocus : false },
    { name: 'address.city' }
  ];

  $scope.gridOptions.multiSelect = false;
  $scope.gridOptions.modifierKeysToMultiSelect = false;
  $scope.gridOptions.noUnselect = true;
  $scope.gridOptions.onRegisterApi = function( gridApi ) {
    $scope.gridApi = gridApi;

    gridApi.selection.on.rowSelectionChanged($scope,function(row){
      if(row.isSelected){
          row.entity.omit = 1;
      }
      if(!row.isSelected){
          row.entity.omit = 0;
      }
        // now save to database...
    });

    gridApi.selection.on.rowSelectionChangedBatch($scope,function(rows){
      angular.forEach(rows, function(value, key) {
         if(value.isSelected){
           value.entity.omit = 1;
         }
         if(!value.isSelected){
           value.entity.omit = 0;
         }
      // now save to database...
      });
    });
  };

  $scope.toggleRowSelection = function() {
    $scope.gridApi.selection.clearSelectedRows();
    $scope.gridOptions.enableRowSelection = !$scope.gridOptions.enableRowSelection;
    $scope.gridApi.core.notifyDataChange( uiGridConstants.dataChange.OPTIONS);
  };

  $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
    .success(function(data) {
      _.forEach(data, function(row) {
        row.omit = 0;
      });
      
      /* arbitrarily setting the fourth row's omit value to 1*/
      data[3].omit = 1;
      $scope.gridOptions.data = data;
      
      /* using lodash find method to grab the row with omit === 1 */
      /* could also use native JS filter, which returns array rather than object */
      var initSelected = _.find($scope.gridOptions.data, function(row) { return row.omit === 1; });
      $scope.gridApi.grid.modifyRows($scope.gridOptions.data);
      $scope.gridApi.selection.selectRow(initSelected);

      /**
       * OR:
       * $interval( function() { 
       *    $scope.gridApi.selection.selectRow(initSelected);
       * }, 0, 1);
       */
    });

    

}]);

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="lodash.js@4.6.1" data-semver="4.6.1" src="https://cdn.jsdelivr.net/lodash/4.6.1/lodash.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css" />
    <link rel="stylesheet" href="main.css" type="text/css" />
  </head>

  <body>
    <div ng-controller="gridCtrl">
      <div ui-grid="gridOptions" ui-grid-selection="" class="grid"></div>
    </div>
  </body>

</html>