AngularJS ui-grid row select limit

Question

I want to limit the selection in my ui-grid to 10. In my gridOptions I do

onRegisterApi: function (gridApi) {
    $scope.gridApi = gridApi;
    gridApi.selection.on.rowSelectionChanged($scope, function (row) {
        $scope.rowsSelected = $scope.gridApi.selection.getSelectedRows();
        $scope.countRows = $scope.rowsSelected.length;
        if ($scope.countRows === 10)
        {
            // disable option to select rows now
        }
    });
}

but now I don't know how to disable this option... thanks for any help!

Raina

facing same issue. Have you fixed it? – Gastrocnemius

Answer 1

A possible solution, albeit a bit late:

onRegisterApi: function (gridApi) {
    $scope.gridApi = gridApi;
    gridApi.selection.on.rowSelectionChanged($scope, function (row) {
        $scope.rowsSelected = $scope.gridApi.selection.getSelectedRows();
        $scope.countRows = $scope.rowsSelected.length;
        if ($scope.countRows > 10)
        {
            row.setSelected(false); // Remove selection for the current row
        }
    });
}

When the rowSelectionChanged event is triggered, the row has already been selected, and the selectedCount has been updated. If you want a maximum of 10 selected rows, we need to deselect the current row when there are more than 10 rows selected.

Also, make sure $scope.gridOptions.enableSelectionBatchEvent = false.

Gulp