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?

Bennett Adams · Accepted Answer · 2016-07-17 15:36:09Z

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="[email protected]" 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>

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related