how to trigger firstDataRendered on ag-grid in angular?

user_4378039 0
Viewed 5085

my component has input that gets data and im selecting the first row with firstDataRendered. the problem is when the input data changed so the grid not fires the events how can i trigger the grid events based on my input changes?

 <ag-grid-angular
  #agGrid
  class="ag-theme-alpine"
  style="width: 100%; height: 500px"
  [rowData]="flights"
  [columnDefs]="columnDefs"
  [rowSelection]="'single'"
  (gridReady)="onGridReady($event)"
  (firstDataRendered)="onFirstDataRendered($event)"
>
</ag-grid-angular>

import {
  Component,
  Input,
  OnChanges,
  OnInit,
  SimpleChanges,
} from '@angular/core';
import { Flight } from './model/flight.interface';

@Component({
  selector: 'app-worker-flights-list',
  templateUrl: './worker-flights-list.component.html',
  styleUrls: ['./worker-flights-list.component.css'],
})
export class WorkerFlightsListComponent implements OnInit, OnChanges {
  @Input() flights: Flight[] = [];
  gridApi: any;
  rendered: boolean;
  columnDefs = [
    { headerName: 'Flight Number', field: 'num' },
    { headerName: 'Origin', field: 'from' },
    { headerName: 'Origin Date', field: 'from_date' },
    { headerName: 'Destination', field: 'to' },
    { headerName: 'Destination Date', field: 'to_date' },
  ];
  constructor() {}
  ngOnChanges(changes: SimpleChanges): void {
    if (changes['flights'] && this.rendered) {
      // this.gridApi.api.getDisplayedRowAtIndex(0).setSelected(true);
    }
  }

  ngOnInit(): void {}
  onGridReady(grid: any): void {
    debugger;
    this.gridApi = grid;
  }
  onFirstDataRendered(params: any): void {
    this.rendered = true;
    this.gridApi.api.getDisplayedRowAtIndex(0).setSelected(true);
  }
}
ag-grid angular8
1 Answers

The event firstDataRendered will only be fired the first time data is rendered, not every time the data is rendered or updated. See the event definition here.

A solution would be to utilize the rowDataChanged event like so:

onRowDataChanged(params: any): void {
    this.rendered = true;
    params.api.getDisplayedRowAtIndex(0).setSelected(true);
  }

See demo here

user_43006080
Related