Pablo Pablo - 9 months ago 212
Javascript Question

angular ui-grid event: row selected

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?


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

I think you should take a look at the tutorial page in ui-grid: The API page sucks, in my opinion :(.