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?
Select a row by clicking on it. Selecting a row will remove any previous selection unless you hold down Ctrl while clicking. Selecting a row and holding down Shift while clicking a second row will select the range.
Property rowSelection='multiple' is set to enable multiple row selection. Selecting multiple rows can be achieved by holding down Ctrl and mouse clicking the rows. A range of rows can be selected by using Shift .
Multiple Rows SelectionSelect the checkbox of each desired row, or. Press and hold Ctrl , and click the desired rows, or.
onRegisterApi is used to handle events. For example: If an edit is made, or a row is selected, you would use the onRegisterApi to catch the event and run some function. As for ordering, it doesn't matter if your gridOptions are created first, or the html DOM element.
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 :(.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With