Angular TreeList - Load Panel
The load panel is displayed while the UI component 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 property. Setting the same property to false disables the load panel completely.
jQuery
$(function() { $("#treeListContainer").dxTreeList({ loadPanel: { enabled: true } }); });
Angular
<dx-tree-list ... > <dxo-load-panel [enabled]="true"> </dxo-load-panel> </dx-tree-list>
import { DxTreeListModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxTreeListModule ], // ... })
Vue
<template> <DxTreeList ... > <DxLoadPanel :enabled="true" /> </DxTreeList> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxTreeList, { DxLoadPanel } from 'devextreme-vue/tree-list'; export default { components: { DxTreeList, DxLoadPanel }, // ... } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import TreeList, { LoadPanel } from 'devextreme-react/tree-list'; export default function App() { return ( <TreeList ... > <LoadPanel enabled /> </TreeList> ); }
You can also control the load panel programmatically using the beginCustomLoading(messageText) and endCustomLoading() methods.
jQuery
var treeList = $("#treeListContainer").dxTreeList("instance"); treeList.beginCustomLoading(); // ... treeList.endCustomLoading();
Angular
import { ..., ViewChild } from "@angular/core"; import { DxTreeListModule, DxTreeListComponent } from "devextreme-angular"; // ... export class AppComponent { @ViewChild(DxTreeListComponent, { static: false }) treeList: DxTreeListComponent; // Prior to Angular 8 // @ViewChild(DxTreeListComponent) treeList: DxTreeListComponent; performLongOperation() { this.treeList.instance.beginCustomLoading(); // ... this.treeList.instance.endCustomLoading(); } } @NgModule({ imports: [ // ... DxTreeListModule ], // ... })
Vue
<template> <DxTreeList ref="treeListRefKey"> <!-- ... --> </DxTreeList> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxTreeList, { // ... } from 'devextreme-vue/tree-list'; const treeListRefKey = "my-tree-list"; export default { components: { DxTreeList, // ... }, data: function() { return { treeListRefKey }; }, methods: { performLongOperation: function() { this.treeList.beginCustomLoading(); // ... this.treeList.endCustomLoading(); } }, computed: { treeList: function() { return this.$refs[treeListRefKey].instance; } } } </script>
React
import React, { useRef, useCallback } from 'react'; import 'devextreme/dist/css/dx.light.css'; import TreeList, { // ... } from 'devextreme-react/tree-list'; export default function App() { const treeList = useRef(null); const performLongOperation = useCallback(() => { treeList.current.instance().beginCustomLoading(); // ... treeList.current.instance().endCustomLoading(); }, []); return ( <TreeList ref="treeList"> {/* ... */} </TreeList> ); }
Since the load panel is a DevExtreme LoadPanel UI component, you can declare any properties of this UI component in the TreeList's loadPanel object. For example, you can change the panel's size with the height and width properties, or employ another loading indicator using the indicatorSrc property.
jQuery
$(function() { $("#treeListContainer").dxTreeList({ loadPanel: { height: 100, width: 250, indicatorSrc: "https://js.devexpress.com/Content/data/loadingIcons/rolling.svg" } }); });
Angular
<dx-tree-list ... > <dxo-load-panel [height]="100" [width]="250" indicatorSrc="https://js.devexpress.com/Content/data/loadingIcons/rolling.svg"> </dxo-load-panel> </dx-tree-list>
import { DxTreeListModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxTreeListModule ], // ... })
Vue
<template> <DxTreeList ... > <DxLoadPanel :height="100" :width="250" indicator-src="https://js.devexpress.com/Content/data/loadingIcons/rolling.svg" /> </DxTreeList> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxTreeList, { DxLoadPanel } from 'devextreme-vue/tree-list'; export default { components: { DxTreeList, DxLoadPanel }, // ... } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import TreeList, { LoadPanel } from 'devextreme-react/tree-list'; export default function App() { return ( <TreeList ... > <LoadPanel height={100} width={250} indicatorSrc="https://js.devexpress.com/Content/data/loadingIcons/rolling.svg" /> </TreeList> ); }
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.