Introduction
I have Ag-Grid and on page load. It shows all the rows selected.
Now, I am going to show how to deselect single or multiple rows one by one.
Explanation
Now, in this image, I have selected All Rows on Page Load and I want to deselect the rows one by one and then select rows one by one.
Now, you can see that in the second picture, I deselect Single without deslecting other rows.
Code For This
- $scope.gridOptions = {
- columnDefs:
-
- { headerName: "CompanyName", field: "CompanyName", editable: true, width: 130 },
- { headerName: 'ProductName', field: "ProductName", editable: true, width: 130 },
- { headerName: "ProjectID", field: "ProjectID", editable: true, width: 100 },
- { headerName: "Status", field: "Status", editable: true, width: 100 },
- { headerName: "Delete", field: "Delete", editable: true, editable: false, width: 100 cellRenderer: customEditorImageWQ },
- { headerName: "Update", field: "Update", editable: true, editable: false, width: 100, cellRenderer: customEditor }],
- rowData: null,
- enableColResize: true,
- enableSorting: true,
- rowSelection: 'multiple',
- angularCompileRows: true,
- rowDeselection: true,
- onRowClicked: RowClick,
- enableFilter: true,
- editable: true,
- suppressRowClickSelection: true,
- };
-
-
- function RowClick(param) {
- var currentRowIndex = param.rowIndex;
- $scope.temp = 0;
- $scope.gridOptions.api.forEachNode(function select(node, idx) {
- if (idx == currentRowIndex && $scope.temp == 0) {
- var success = false;
- var data = $scope.gridOptions.api.getSelectedRows();
- for (var iRows = 0; iRows < data.length; iRows++) {
- if (data[iRows]["CompanyName"] == param.data.CompanyName) {
- success = true;
- break;
- }
- }
-
- if (success == false) {
- $scope.gridOptions.api.selectNode(node, true, true);
- $scope.temp++;
-
-
- }
- else {
- $scope.gridOptions.api.deselectNode(node);
- $scope.temp++;
-
- }
- }
- });
- }