DevExtreme jQuery/JS - Load Panel
The load panel is displayed while the widget loads data. It consists of a loading indicator and text, both placed on a pane.
The load panel is shown only for remote data sources by default. To show it regardless of the data source type, assign true to the loadPanel.enabled option. Setting the same option to false disables the load panel completely.
jQuery
$(function() {
$("#dataGridContainer").dxDataGrid({
loadPanel: {
enabled: true
}
});
});Angular
<dx-data-grid ... >
<dxo-load-panel
[enabled]="true">
</dxo-load-panel>
</dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxDataGridModule
],
// ...
})You can also control the load panel programmatically using the beginCustomLoading(messageText) and endCustomLoading() methods.
jQuery
var dataGrid = $("#dataGridContainer").dxDataGrid("instance");
dataGrid.beginCustomLoading();
// ...
dataGrid.endCustomLoading();Angular
import { ..., ViewChild } from "@angular/core";
import { DxDataGridModule, DxDataGridComponent } from "devextreme-angular";
// ...
export class AppComponent {
@ViewChild(DxDataGridComponent, { static: false }) dataGrid: DxDataGridComponent;
// Prior to Angular 8
// @ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent;
doSomeLongOperation () {
this.dataGrid.instance.beginCustomLoading();
// ...
this.dataGrid.instance.endCustomLoading();
}
}
@NgModule({
imports: [
// ...
DxDataGridModule
],
// ...
})Since the load panel is a DevExtreme LoadPanel widget, you can declare any options of this widget in the DataGrid's loadPanel object. For example, you can change the panel's size with the height and width options, or employ another loading indicator using the indicatorSrc option.
jQuery
$(function() {
$("#dataGridContainer").dxDataGrid({
loadPanel: {
height: 100,
width: 250,
indicatorSrc: "https://js.devexpress.com/Content/data/loadingIcons/rolling.svg"
}
});
});Angular
<dx-data-grid ... >
<dxo-load-panel
[height]="100"
[width]="250"
indicatorSrc="https://js.devexpress.com/Content/data/loadingIcons/rolling.svg">
</dxo-load-panel>
</dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxDataGridModule
],
// ...
})