What is the best way to display a custom row overlay in ag-grid?

I am looking to display a customized message when no users are found using ag-grid in Angular6.

Below is the code snippet:

ngOnInit() {
  this.gridOptions.frameworkComponents.loadingCellRenderer = TableLoadingComponent;
  this.rowBuffer = 0;
  this.rowSelection = 'multiple';
  this.rowModelType = 'infinite';
  this.paginationPageSize = 10;
  this.cacheOverflowSize = 2;
  this.maxConcurrentDatasourceRequests = 1;
  this.infiniteInitialRowCount = 10;
  this.maxBlocksInCache = 2;
   
  this.overlayLoadingTemplate =
    '<span class="ag-overlay-loading-center">Please wait while your rows are loading</span>';
  this.overlayNoRowsTemplate =
    '<span class="ag-overlay-loading-center" style="font-size: 20px"><i class="fa fa-window-close"></i> Empty data</span>';
}

I want to replace "Empty data" with "No users found" specifically in my users list component

<div class="card-body" style="height: 400px;">
  <ngb-alert [type]="alert?.type" *ngIf="alert" (close)="alert = null">{{alert?.message}}</ngb-alert>
  <app-table (readyGrid)="onGridReady($event)" (dbclickemitter)="edit($event)" [gridOptions]="gridOptions">
  </app-table>
</div>
angularoverlayag-grid

Answer №1

To enhance your ag-grid template, you can incorporate the code 

[overlayLoadingTemplate]="overlayLoadingTemplate"
. An example of this implementation can be seen here:

https://stackblitz.com/edit/ag-grid-bss-test-rb1jtp?file=app%2Fapp.component.html

In the provided demonstration, initially a message is displayed:

Please wait while your rows are loading

After a delay of 6 seconds, the data will be loaded.

If the rowData is set to null and no data is found, the message 

Please wait while your rows are loading
persists. You have the option to replace it with No users found

The usage of setTimeout in this scenario is simply for simulating a service that retrieves results after a specified duration.

Answer №2

   displayNoDataMessage(): void {
    if (this.gridApi.getDisplayedRowCount() === 0) {
        (this.gridApi as any).gridOptionsWrapper.setProperty('overlayNoRowsTemplate', 'custom message');
    }
}

Be sure to call this function in the GridReady method:

    onGridReady(params: GridReadyEvent): void {
    ...
    this.displayNoDataMessage();
}

No need for any other changes in the grid options or template.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for displaying backend error messages on the frontend

I am facing an issue with returning error messages from the backend to the frontend in my Angular project. The specific requirement is to display an error message when the value of msisdn is not eligible for renewal. Currently, the hardcoded error message ...

javascripthtmlangulartypescriptvalidation

How to retrieve TypeScript object within a Bootstrap modal in Angular

Unable to make my modal access a JavaScript object in the controller to dynamically populate fields. Progress Made: Created a component displaying a list of "person" objects. Implemented a functionality to open a modal upon clicking a row in the list. ...

javascriptangulartypescript

Unraveling the Intricacies of Manipulating Values through mockStore.overrideSelector

There is a certain selector that I'm working with, and it returns either true or false. To ensure accurate testing in my unit test, I need to cover scenarios where this value is both true and false. To set up for the test, I have initially configured ...

angularunit-testingngrx

Angular 9 library compilation issue: Module unused warning detected

After upgrading my project from Angular 8 to Angular 9, I encountered a warning when trying to build the library: The '__read' is imported from external module 'tslib', but never used https://i.stack.imgur.com/Xg4Eu.png This warning ...

angularangular9angular-libraryng-packagr

The 'checked' property cannot be bound to 'mat-button-toggle' as it is not recognized as a valid property in Angular 9

I am encountering an issue with my Angular 9 application. I have integrated angular-material and imported the MatCheckboxModule correctly in the module. Here is the version of the material package I am using: "@angular/material": "^10.2.0&q ...

javascriptangulartypescriptangular-material

Is there a way to adjust the StatusBar color or make it transparent on Android when working with NativeScript and Angular?

I am having trouble changing the StatusBar color in my NativeScript with Angular project. It currently appears as translucent black, darkening the background behind it. I want to either make it transparent or match the background color of the page. What I ...

androidangularnativescriptstatusbartransparent

Despite being present in the node_modules folder, the ag-grid-vue module appears to be missing

Currently, I am diligently following the Vue.js AgGrid getting started tutorial step by step: https://www.ag-grid.com/vuejs-grid/ However, upon adding the <script> section and saving my progress, an error promptly appears: ERROR Failed to compile ...

javascriptnode.jsvue.jsag-gridag-grid-vue

The specified object '[object Object]' is not compatible with NgFor, which only supports binding to iterable data types like Arrays

I have some code that is attempting to access objects within objects in a template. <table class="table table-striped"> <tr *ngFor="let response of response"> <td><b>ID</b><br>{{ response.us ...

jsonangulartypescript

I am having trouble accessing my JSON data via HTTP get request in Angular 2 when using TypeScript

I am working on developing a JSON file configuration that can be accessed via HTTP GET request in order to retrieve the desired value from the config file and pass it to another component. However, whenever I try to return the value, it shows up as undefin ...

angularjsjsontypescriptangular

The HTML canvas drawImage method overlays images when the source is modified

Trying to implement a scroll animation on my website, I came across a guide for creating an "Apple-like animation" using image sequences. Even though I'm new to Angular, I attempted to adapt the code to work with Angular. However, instead of animatin ...

htmlangulartypescripthtml5-canvas

The p-dialog lacks the proper styling and does not show or hide correctly

I am working on adding a feature where dragging and dropping an event in a calendar triggers a dialog box that requires the user to confirm if they want to postpone the event. However, I ran into an issue where the styling of my p-dialog is not defaulting ...

javascriptangulardialogmodal-dialogprimeng

Trigger the Angular Dragula DropModel Event exclusively from left to right direction

In my application, I have set up two columns using dragula where I can easily drag and drop elements. <div class="taskboard-cards" [dragula]='"task-group"' [(dragulaModel)]="format"> <div class="tas ...

angulartypescriptdrag-and-dropdragulang2-dragula

What are the steps to update data using Angular?

I am currently working on a project to create a simple webpage that allows users to add values to a database. The database only contains an ID and a value, which should also be displayed on the page. Although my code is functioning correctly and I can suc ...

angular

JavaScript heap ran out of memory near heap limit during mark-compacts, rendering the allocation ineffective, resulting in a failed Ionic 3 production build

While attempting to build a production version of my Ionic 3 app, I encountered the following error: "FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory". To troubleshoot this issue, I duplicated the en ...

javascriptangularionic-frameworknpmionic3

A method for comparing two arrays containing identical objects and then storing the results in a variable

I have an item stored within two other items called formKeyValues and form formKeyValues https://i.stack.imgur.com/nRfiu.png form https://i.stack.imgur.com/eDpid.png I am looking to extract only the keys and values from formKeyValues and place them in ...

angulartypescriptangular6angular8

Activate the event when the radio button is changed

Is there a way to change the selected radio button in a radio group that is generated using a for loop? I am attempting to utilize the changeRadio function to select and trigger the change of the radio button based on a specific value. <mat-radio-group ...

javascriptangulartypescript

Angular2 - Retrieve data in XLS format from RestService并下载

I am looking to create a web service using Apache POI to generate an Excel file (xls, xlsx). Below is the snippet of code I have put together: @RequestMapping(value = "/export", method = RequestMethod.GET) public void exportXlsx(HttpServletResponse respon ...

javaexcelangularapache-poi

What are the best ways to utilize .svg images for native script splash screens, backgrounds, icons, and buttons?

I am interested in replacing the .png files I previously used for my native script android app with .svg files. My goal is to utilize svg images for splash screens, backgrounds, icons, and buttons. Thank you! ...

angularnativescriptangular-nativescript

Error in backend request originating from an Angular 2 source

I have an email for user verification that includes a link to my angular 2 route localhost:4200/verify/{userId}. When the user clicks on this link, it directs them to the angular 2 route where I extract the userId from the URL and pass it into my service. ...

node.jsangularexpress

Delete the padding of a component with the power of angular

I'm looking to eliminate the margin applied to a particular element that is being created by Ionic. The specific element in question is located within the page-table-view, which is a subpage of page-board. https://i.stack.imgur.com/KPLDQ.png This is ...

angularionic2