angular ui-grid event: row selected
Solution 1
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 :(.
Solution 2
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"
Solution 3
$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>
![Pablo](https://i.stack.imgur.com/beqf8.jpg?s=256&g=1)
Comments
-
Pablo almost 2 years
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?