Function rowSelected has been called twice(selected and deselected)

Question

I have a grid with Ag-Grid and is working very well, but I needed put event click at a row with some specific condition(error condition callback). So when a click on the row the first time work as normal but the second time onwards get last time value and current value, so print the current value. Changing the order.

My template file:

<!-- <button (click)="setDataValue()">rowNode.setDataValue</button> -->
<ag-grid-angular
#agGrid
style="width: 100%; height: 450px;"
class="ag-theme-material"
(gridReady)="onGridReady($event)"
(rowSelected)="onRowSelected($event)" // ----------The FUNCTION----------
[rowData]="rowData"
[gridOptions]="gridOptions"
[columnDefs]="columnDefs"
[defaultColDef]="defaultColDef"
[modules]="modules"
[pagination]="true"
[paginationPageSize]="paginationPageSize"
[pagination]="true"
[domLayout]="domLayout"
[rowHeight]="rowHeight"
[overlayLoadingTemplate]="overlayLoadingTemplate"
[overlayNoRowsTemplate]="overlayNoRowsTemplate"
[rowSelection]="rowSelection"
>
</ag-grid-angular>
 <div #anchorErrorMessage class="container">
  <div
   [hidden]="!rowErrorMessage"
   class="alert alert-danger"
   role="alert"
  >
 <h4 class="alert-heading">Erro de inconsistência!</h4>
 <hr />
 <ul>
   <li *ngFor="let error of rowErrorMessage">
      {{ error }}
   </li>
  </ul>
 </div>
</div>

My .ts file

onRowSelected(event) {
  console.log(event.node.data.erros);

  this.rowErrorMessage = '';
  this.rowErrorMessage = event.node.data.erros;

  setTimeout(() => {
    this.anchorErrorMessage.nativeElement.scrollIntoView({ behavior: 'smooth' });
  }, 20);
}

My log:

So every time I click get the 2 values. pls help me.

Answer 1

You're right, annoyingly, agGrid calls the "onRowSelected" event twice, once for the row being selected, and once for the row being unselected.

(This second event really should've been provided separately, under an event called "onRowUnselected".)

Also, both times, the event.type value is set as "rowSelected" (sigh) so you actually need to pay attention to the event.node.selected value instead.

So, to run some code, just based on a row becoming selected, you would use:

  onRowSelected(event) {
      if (!event.node.selected)
          return;

      let id = event.node.data.YourPrimaryKeyField;
      console.log('Selected row: ' + id);
      . . . 
  }

Why doesn't the agGrid documentation mention this crucial event.node.selected value ?!

https://www.ag-grid.com/javascript-grid-events/#selection

Answer 2

I got it. My problem was this event:

(rowSelection)="onRowSelected(event)"

calls two methods, selected and deselected, so I just put a condition to do whatever I want inside as selected.

https://www.ag-grid.com/javascript-grid-events/#reference-selection