Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

LoadingPanel Class

Contains settings related to loading panel functionality.

#Declaration

TypeScript
export class LoadingPanel

#Remarks

The Rich Text Editor displays a loading panel while waiting for a callback response.

Use members provided by this class to disable the panel, show and hide it manually, or provide a custom loading panel.

richEdit.loadingPanel.customPanel = new function () {
    this.show = function () {
        this.panel.style.display = '';
        this.visible = true;
    };
    this.hide = function () {
        this.panel.style.display = 'none';
        this.visible = false;
    };
    this.dispose = function () {
        var parentNode = this.panel.parentNode;
        if (parentNode)
            parentNode.removeChild(this.panel);
    };
    this.panel = document.createElement('div');
    this.panel.textContent = "Loading...";
    this.panel.style.position = 'absolute';
    this.panel.style.zIndex = 10000;
    this.panel.style.backgroundColor = 'green'
    this.panel.style.top = '50%';
    this.panel.style.left = '50%';
    document.documentElement.appendChild(this.panel);
    this.hide();
};

#Properties

#customPanel Property

Allows you to provide a custom loading panel.

#Declaration

TypeScript
get customPanel(): undefined | ICustomLoadingPanel
set customPanel(value: undefined | ICustomLoadingPanel)

#Property Value

Type Description
ICustomLoadingPanel

An object that implements the custom loading panel interface. undefined if a custom loading panel is not specified.

#Remarks

Use the customPanel property to provide a custom loading panel.

javascript
richEdit.loadingPanel.customPanel = new function() {
this.show = function() {
  this.panel.style.display = ''; 
    this.visible = true;
  };
  this.hide = function() {
    this.panel.style.display = 'none'; 
    this.visible = false;
  };
  this.dispose = function() {
    var parentNode = this.panel.parentNode;
    if (parentNode)
      parentNode.removeChild(this.panel);
  };
  this.panel = document.createElement('div');
  this.panel.textContent = "Loading...";
  this.panel.style.position = 'absolute';
  this.panel.style.zIndex = 1000;
  this.panel.style.backgroundColor = 'green'
  this.panel.style.top = '50%';
  this.panel.style.left = '50%';
  document.documentElement.appendChild(this.panel);
  this.hide();
};

To return the editor’s default loading panel, write the following code.

richEdit.loadingPanel.customPanel = null;

#enabled Property

Specifies whether the loading panel is enabled in the control.

#Declaration

TypeScript
get enabled(): boolean
set enabled(value: boolean)

#Property Value

Type Description
boolean

true to enable the loading panel; otherwise, false.

#Remarks

Set the enabled property to false to disable the Rich Text Editor loading panel. In this case, the show and hide methods are not in effect.

richEdit.loadingPanel.enabled = false;

Note

This property does not affect a loading panel displayed in the editor’s dialogs.

#Methods

#hide Method

Hides the loading panel.

#Declaration

TypeScript
hide(): void

#Remarks

richEdit.loadingPanel.hide();

#show Method

Shows the loading panel.

#Declaration

TypeScript
show(): void

#Remarks

richEdit.loadingPanel.show();