Unable to display overlay template in ag-grid when url fails

Question

I'm trying to show overlay template when the service URL fails in ag-grid.

But the overlay message is not displaying as expected.

I wanted to show Service URL failed message when the http request fails. And another overlay message Please wait data is loading when data is actually loading in the grid.

I'm unable to display the overlay message when the url gets failed. it always show's the first message

How do i fix this ?

This my link to the plunker project : https://plnkr.co/edit/MzpwnE0enLx2PVJOFUyn?p=preview

Note: to replicate the issue, give some invalid http url

this._Service.httpPost(b, a)
  .retryWhen((err) => {
    return err.scan((retryCount) => {
      retryCount += 1;
      if (retryCount < 3) {
        return;
      } else {
        this.gridOptions.overlayNoRowsTemplate = '<span class="messageStyles">Problem with service link. Please try again later</span>';
        this.gridOptions.api.showNoRowsOverlay();
        throw (err);
      }
    }, 0).delay(1000);
  })
  .catch(err => {
    console.log(err);
    return Observable.of(err);
  });

Answer 1

Change your code below, it only update rows in case data is there, else shows the error.

You might need to handle scenario in a different way where in you check if its due to service error or the data is actually empty or due to some other error. I didn't handle that situation in the code.

onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;

this.http
  .get("https://raw.githubusercontent.com/ag-grid/ag-grid-doc1s/master/src/olympicWinnersSmall.json")
    .retryWhen((err) => {
              return err.scan((retryCount) => {
                retryCount += 1;
                if ( retryCount < 3 ) {
                  this.overlayLoadingTemplate = '<span class="messageStyles">Problem with service link. Please try again later</span>';
                    this.gridApi.showLoadingOverlay();
                    this.gridApi.refreshCells(params);
                //  return;
                } else {
                   this.overlayLoadingTemplate = '<span class="messageStyles">Problem with service link. Please try again later</span>';
                    this.gridApi.showLoadingOverlay();
                    this.gridApi.refreshCells(params);
                  throw(err);
                }
              }, 0).delay(1000);
            })
            .catch(err => {
              console.log(err);
              return Observable.of(err);
            })
     .subscribe(data => {
            if(!data || !data.length)
             {
               this.gridApi.showLoadingOverlay();
             }else
             {
                params.api.setRowData(data);    
             }
      });

}

Answer 2

If you just want to change the message, modify the localeTextFunc of the grid API to return a different message. For this example to work you should bind gridOptions to the grid e.g. <ag-grid-angular [gridOptions]="gridOptions"..., then, on error call ShowErrorOverlay().

import { GridOptions } from '@ag-grid-community/core';

...

gridOptions: GridOptions;
private origLocaleTextFunc: any;
private errLocaleTextFunc: any;

ngInit() {
    this.gridOptions = this.getDefaultGridOptions(this);
    this.origLocaleTextFunc = this.gridOptions.localeTextFunc;
    this.errLocaleTextFunc = (key, defaultValue) => {
        if (key === 'noRowsToShow') {
            return 'Error!';
        } else {
            return this.origLocaleTextFunc(key, defaultValue);
        }
    };
}



getDefaultGridOptions(context: any): GridOptions {
    const rv = {} as GridOptions;
    rv.localeTextFunc = (key, defaultValue) => {
        switch (key) {
            case 'noRowsToShow': return 'No rows!';
            default: return defaultValue;
        }
    };

    rv.context = { componentParent: context };
    return rv;
}



showErrorOverlay() {
    this.gridOptions.localeTextFunc = this.errLocaleTextFunc; // set error msgs
    this.gridOptions.api.showNoRowsOverlay();
    this.gridOptions.localeTextFunc = this.origLocaleTextFunc; // set default msgs
}

If you need to style the message, look into https://www.ag-grid.com/javascript-grid-overlay-component/ or just modify your .ag-overlay-no-rows-wrapper and .ag-overlay-no-rows-center classes