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

Share Improve this question Follow asked Mar 14 at 13:05 Maa Henna Art by SaksheeMaa Henna Art by Sakshee 1911 bronze badge

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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(); 
  }
}