CODEWITHSUNDEEP
angularag-grid
arunkumar
arunkumar

Reputation: 353

How to show overlay text while filter is empty

I need to show no results found message when user tries to filter any columns.

Is there any way to achieve it in AG-Grid?

[noRowsOverlayComponent]="noRowsOverlayComponent"

Find the example here. Try to enter any incorrect value for any columns.

http://plnkr.co/edit/FPiWCCBVs6UFHuVNa69b?p=preview

Upvotes: 3

Views: 4265

Answers (2)

Ben Sewards
Ben Sewards

Reputation: 2661

2022 Edition

const baseOptions: GridOptions = {
  overlayNoRowsTemplate:
    '<span style="padding: 10px; border: 2px solid #444; background: lightgoldenrodyellow;">This is a custom \'no rows\' overlay</span>',
  onModelUpdated: (event: ModelUpdatedEvent) => {
    event.api.getDisplayedRowCount() === 0 ? 
        event.api.showNoRowsOverlay() : 
        event.api.hideOverlay();
  },
};

Upvotes: 4

Paritosh
Paritosh

Reputation: 11560

I think you want to display NoRowsOverlay when there is not records in the grid.

Check this plunk I created: ag-grid Custom Overlay Components - when there are no rows to display.
Open this Plunk and try to filter first column with zzz string. You'll see it functioning when there are no records in the grid.

How:

One way (of the many - I assume) is to do this is inside onModelUpdated event of .
When this event is fired, check whether are there any rowsToDisplay in the grid or not. Depending on that, you can decide if you want to display overlay or not.

onModelUpdated($event){
  if(this.gridApi && this.gridApi.rowModel.rowsToDisplay.length == 0) {
    this.gridApi.showNoRowsOverlay();
  }
  if(this.gridApi && this.gridApi.rowModel.rowsToDisplay.length > 0) {
    this.gridApi.hideOverlay();
  }
}

Upvotes: 9

Related Questions