angular ui-grid event: row selected

Question

I am trying to enable/disable a button based on the selection of a row on a ui-grid. If there are no rows selected, the button is disabled.

I found this plunkr with the old ng-grid way of firing an event after a row is selected.

  $scope.gridOptions = { 

  data: 'myData', 
  selectedItems: $scope.selections,
  enableRowSelection: true,

  afterSelectionChange:function() {
        if ($scope.selections != "" ) {
            $scope.disabled = false;
        } else {
            $scope.disabled = true;
        }
  }
};

Unfortunately it does not work, and I have found no sign of such event in the ui-grid documentation.

How can I achieve that with ui-grid?

Huy Hoang Pham · Accepted Answer · 2018-08-06 09:57:45Z

45

In ui-grid, you register a callback function on the event "rowSelectionChanged"

 $scope.gridOptions.onRegisterApi = function (gridApi) {
                $scope.gridApi = gridApi;
                gridApi.selection.on.rowSelectionChanged($scope, callbackFunction);
                gridApi.selection.on.rowSelectionChangedBatch($scope, callbackFunction);
            }
 }

 function callbackFunction(row) { 
    var msg = 'row selected ' + row.isSelected; $log.log(msg); 
 })

I think you should take a look at the tutorial page in ui-grid: http://ui-grid.info/docs/#/tutorial/210_selection. The API page sucks, in my opinion :(.

edited Aug 6, 2018 at 9:57

answered Mar 25, 2015 at 3:50

Huy Hoang Pham

4,1471 gold badge19 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

satish kumar V Over a year ago

what parameters should I pass to callBack function?

Huy Hoang Pham Over a year ago

gridApi.selection.on.rowSelectionChanged($scope,function(row){         var msg = 'row selected ' + row.isSelected;         $log.log(msg);       });

Yasin Okumuş Over a year ago

API page sucks really, but here is the URL: ui-grid.info/docs/#/api/ui.grid.selection.api:PublicApi#events

Vishal · Accepted Answer · 2016-03-18 06:01:15Z

4

you can first get all the records selected in the grid currently by doing :

$scope.rowsSelected = $scope.gridApi.selection.getSelectedRows();

now we can get the length of this array using :

$scope.countRows = $scope.rowsSelected.length;

based on $scope.countRows>0 or 0 you can enable or disable a button using

ng-disabled = "countRows"

edited Mar 18, 2016 at 6:01

answered Mar 17, 2016 at 11:23

Vishal

11k22 gold badges90 silver badges136 bronze badges

1 Comment

Vishal Over a year ago

Thanks @shivisuper Glad it was useful!

Nikhil Kumar K · Accepted Answer · 2016-06-24 06:34:02Z

1

   $scope.countRows=0;

    $scope.gridOptions.onRegisterApi = function(gridApi){

       $scope.gridApi = gridApi;

       gridApi.selection.on.rowSelectionChanged($scope, function(row){ 
        $scope.countRows = $scope.gridApi.selection.getSelectedRows().length;
        });

       gridApi.selection.on.rowSelectionChangedBatch($scope, function(row){ 
        $scope.countRows = $scope.gridApi.selection.getSelectedRows().length;
        });
    };

In the HTML side you can use some thing like this

    <button class="custom-button" ng-disabled="countRows<=0" ng-click="submit()">Details</button>

answered Jun 24, 2016 at 6:34

Nikhil Kumar K

1,11712 silver badges13 bronze badges

Collectives™ on Stack Overflow

angular ui-grid event: row selected

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related