I'm using AG Grid in my Angular project and trying to filter the data using quickFilterText. If there are no matching rows, I want to display a "No Data Found" message. However, the AG Grid method showNoRowsOverlay() doesn't seem to be working as expected.

Here’s my current implementation:

onFilterTextBoxChanged(event: Event) {

    this.gridApi.setGridOption(
      "quickFilterText",
      (document.getElementById("filter-text-box") as HTMLInputElement).value,
    );    
      if (this.gridApi.getDisplayedRowCount() === 0) {  
        this.gridApi.showNoRowsOverlay(); 
        
      } else {
        this.gridApi.setGridOption('rowData', this.rowData);
      }       

}

Even when no rows match the filter, the "No Rows" overlay does not appear. What could be the issue? Is there a better approach to achieve this functionality?

Any help would be appreciated!

I'm using AG Grid in my Angular project and trying to filter the data using quickFilterText. If there are no matching rows, I want to display a "No Data Found" message. However, the AG Grid method showNoRowsOverlay() doesn't seem to be working as expected.

Here’s my current implementation:

onFilterTextBoxChanged(event: Event) {

    this.gridApi.setGridOption(
      "quickFilterText",
      (document.getElementById("filter-text-box") as HTMLInputElement).value,
    );    
      if (this.gridApi.getDisplayedRowCount() === 0) {  
        this.gridApi.showNoRowsOverlay(); 
        
      } else {
        this.gridApi.setGridOption('rowData', this.rowData);
      }       

}

Even when no rows match the filter, the "No Rows" overlay does not appear. What could be the issue? Is there a better approach to achieve this functionality?

Any help would be appreciated!

• angular
• filter
• ag-grid

1 Answer 1

My guess is that you will need to separate your code.

Showing the no rows message should be checked/displayed AFTER the filter has beend applied.

https://www.ag-grid/angular-data-grid/grid-events/#reference-filter-filterChanged

filterChanged = (params: any): void => {
  if (this.gridApi.getDisplayedRowCount() === 0) {  
    this.gridApi.showNoRowsOverlay(); 
  }
}