I am using Ag Grid v11.0 with angular 1.x. After the grid is rendered, I want to make an action ( ex: save the grid items ) changing the overlayLoadingTemplate property in order to display a different message ( ex: Saving ... please wait ).

$scope.save = save;

var _overlayLoadingTemplate = '<span class="ag-overlay-loading-center">Please wait while your items are loading</span>';
var _overlaySaveTemplate = '<span class="ag-overlay-loading-center">Saving...</span>';

$scope.gridOptions = {
  columnDefs: columnDefs,
  rowData: [/*stuff*/],
  overlayLoadingTemplate: _overlayLoadingTemplate,
};

function save () {
  $scope.gridOptions.overlayLoadingTemplate = _overlaySaveTemplate;

  $scope.gridOptions.api.showLoadingOverlay();

  /* call service and get response logic here */

  $scope.gridOptions.api.hideOverlay();
}

The overlayLoadingTemplate property is not being changed, is the initial one: _overlayLoadingTemplate. I didn't find any set methods like setOverlayLoadingTemplate

I am using Ag Grid v11.0 with angular 1.x. After the grid is rendered, I want to make an action ( ex: save the grid items ) changing the overlayLoadingTemplate property in order to display a different message ( ex: Saving ... please wait ).

$scope.save = save;

var _overlayLoadingTemplate = '<span class="ag-overlay-loading-center">Please wait while your items are loading</span>';
var _overlaySaveTemplate = '<span class="ag-overlay-loading-center">Saving...</span>';

$scope.gridOptions = {
  columnDefs: columnDefs,
  rowData: [/*stuff*/],
  overlayLoadingTemplate: _overlayLoadingTemplate,
};

function save () {
  $scope.gridOptions.overlayLoadingTemplate = _overlaySaveTemplate;

  $scope.gridOptions.api.showLoadingOverlay();

  /* call service and get response logic here */

  $scope.gridOptions.api.hideOverlay();
}

The overlayLoadingTemplate property is not being changed, is the initial one: _overlayLoadingTemplate. I didn't find any set methods like setOverlayLoadingTemplate

• javascript
• angularjs
• ag-grid

2 Answers 2

It is possible. I needed to change text in the overlay template of the child grid in a master-detail scenario.

In your overlay template, create placeholder elements that you swap out with content right before you call showLoadingOverlay

$scope.save = save;

var _overlayLoadingTemplate = '<span class="ag-overlay-loading-center"><span id="js-overlay-text">Please wait while your items are loading...</span></span>';

$scope.gridOptions = {
  columnDefs: columnDefs,
  rowData: [/*stuff*/],
  overlayLoadingTemplate: _overlayLoadingTemplate,
};

function save () {

  document.getElementById("js-overlay-text").innerText = "Saving...";
  $scope.gridOptions.api.showLoadingOverlay();

  /* call service and get response logic here */

  $scope.gridOptions.api.hideOverlay();
}

The overlays cannot be updated in the way that you want I'm afraid. The Loading Overlay and the No Rows Overlay can be changed from the default, but this is done at initialisation time and cannot be changed again.

If you wish to display application specific overlays I'm afraid you'll need to provide an implementation of this yourself.