no data found not working in filter ag grid

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!

Continue reading...