javascript - How to change the overlayLoadingTemplate in ag Grid? - Stack Overflow

admin管理员组

文章数量:1394184

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

Share Improve this question Follow asked Jul 12, 2017 at 16:17 que1326que1326 2,32544 gold badges4343 silver badges5959 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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.

本文标签： javascriptHow to change the overlayLoadingTemplate in ag GridStack Overflow