Ag Grid and async pipe causing issues with Loading Overlay

Question

The loading overlay applies fine on initial load.

HTML

  <ag-grid-angular #agGrid style="width: 100%; height: 550px;" 
    class="ag-theme-balham" [gridOptions]="gridOptions" 
    [rowData]="filteredTasks$ | async" 
    (selectionChanged)="onSelectionChanged()" 
    (rowClicked)="onRowClicked($event)">
  </ag-grid-angular>

Component.ts

    filteredTasks$: Observable<TaskListDto[]>;

    this.filteredTask$ = this.taskService.getFilteredTasks(httpParams);

I have a filter that a user selects that goes out to the DB with new httpParams and returns the data the user is requesting. I am not even able to force the Loading overlay. For some reason being set to the observable is just causing the grid to display "No Row to Show"

Something is overriding my overlay even when I force the api to display what I want. Below is the code I used to figure out there is something forcing the "No Rows to Show"

    1st debugger;
    this.gridApi.setRowData([]);
    2nd debugger;
    this.filteredTasks$ = this.taskService.getFilteredTasks(httpParams);
    3rd debugger;
    this.gridOptions.api.hideOverlay();
    4th debugger;
    this.gridOptions.api.showLoadingOverlay();
    5th debugger;

First debugger hits and previous data is shown

Second debugger hits and ag grid is empty and no rows is displayed

Third debugger hits and no rows is still displayed (even though the data source is now set to the observable with async pipe)

Fourth debugger hits and No overlay at all is displayed

Fifth debugger hits and finally 'Loading' is shown but it's instantly replaced by "No Rows to Show"

What is going on? What am i doing wrong here?

Answer 1

Fifth debugger hits and finally 'Loading' is shown but it's instantly replaced by "No Rows to Show"

Your flow of debugging is correct, "no rows to show" displayed cuz on this step loadNewData rows$ got new observer binding, but it shouldn't.

Once you've set the data (on init phase) - it's done, after that - all manipulation with grid should be handled via gridApi

on your case, loadNewData should be done like that:

loadNewData() {
    this.showOverlay();
    let request = of(this.rowData2).pipe(
      delay(5000)
    )
    request.subscribe(result=>{
      this.hideOverlay();
      this.gridOptions.api.setRowData(result)
    })
}