How To Deselect Row In Ag-Grid Without Unselecting Other Rows In Angular

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

  1.    $scope.gridOptions = {  
  2.         columnDefs:  
  3.   
  4.    { headerName: "CompanyName", field: "CompanyName", editable: true, width: 130 },  
  5.   { headerName: 'ProductName', field: "ProductName", editable: true, width: 130 },  
  6.    { headerName: "ProjectID", field: "ProjectID", editable: true, width: 100 },  
  7.    { headerName: "Status", field: "Status", editable: true, width: 100 },  
  8. { headerName: "Delete", field: "Delete", editable: true, editable: false, width: 100 cellRenderer: customEditorImageWQ },  
  9.     { headerName: "Update", field: "Update", editable: true, editable: false, width: 100, cellRenderer: customEditor }],  
  10.         rowData: null,  
  11.         enableColResize: true,  
  12.         enableSorting: true,  
  13.         rowSelection: 'multiple',  
  14.         angularCompileRows: true,  
  15.         rowDeselection: true,  
  16.         onRowClicked: RowClick,  
  17.         enableFilter: true,  
  18.         editable: true,  
  19.         suppressRowClickSelection: true,  
  20.     };  
  21.      
  22.   
  23.     function RowClick(param) {  
  24.         var currentRowIndex = param.rowIndex;  
  25.         $scope.temp = 0;  
  26.         $scope.gridOptions.api.forEachNode(function select(node, idx) {  
  27.             if (idx == currentRowIndex && $scope.temp == 0) {  
  28.                 var success = false;  
  29.                 var data = $scope.gridOptions.api.getSelectedRows();  
  30.                 for (var iRows = 0; iRows < data.length; iRows++) {  
  31.                     if (data[iRows]["CompanyName"] == param.data.CompanyName) {  
  32.                         success = true;  
  33.                         break;  
  34.                     }  
  35.                 }  
  36.   
  37.                 if (success == false) {  
  38.                     $scope.gridOptions.api.selectNode(node, truetrue);  
  39.                     $scope.temp++;  
  40.                     
  41.   
  42.                 }  
  43.                 else {  
  44.                     $scope.gridOptions.api.deselectNode(node);  
  45.                     $scope.temp++;  
  46.                      
  47.                 }  
  48.             }  
  49.         });  
  50.     } 
Ebook Download
View all
Learn
View all