UI Widgets LoadPanel

A widget used to indicate whether or not an element is loading.

Type: Object

The dxLoadPanel widget represents an overlaying element indicating that loading is in progress. The text displayed by the widget is specified via the message configuration option.

Declare an observable Boolean variable and assign it to the visible configuration option to control widget visibility.

JavaScript
var loadPanelVisible = ko.observable(false);

To create the dxLoadPanel widget, add a div element with dxLoadPanel Knockout binding within the body of the required view.

HTML
<div data-bind="dxLoadPanel: { message: 'Loading...', visible: loadPanelVisible }"></div>

Refer to the Add a Widget documentation section to learn how to create widgets in detail.

Show Example:
jQuery
<div id="button" data-bind="dxButton:{text: 'Load', clickAction: startLoading}"></div>
<div data-bind="dxLoadPanel:{message: 'Loading...', visible: loadPanelVisible }"></div>
loadPanelVisible = ko.observable(false);
startLoading = function() {
  loadPanelVisible(true);
  setTimeout($.proxy(this.finishLoading, this), 3000);
};
finishLoading = function() {
  loadPanelVisible(false);
};
body {
  text-align: center;
}
#button {
  margin-top: 25px;
}

Configuration

An object that defines configuration options for the dxLoadPanel widget.

Methods

This section describes members used to manipulate the widget.

Events

This section describes events fired by this component.