CODEWITHSUNDEEP
angularag-gridag-grid-angular
hudjoubert
hudjoubert

Reputation: 163

Function rowSelected has been called twice(selected and deselected)

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:

enter image description here

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

Upvotes: 8

Views: 8616

Answers (2)

hudjoubert
hudjoubert

Reputation: 163

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

Upvotes: 3

Mike Gledhill
Mike Gledhill

Reputation: 29161

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

Upvotes: 22

Related Questions