Vue DataGrid - 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.
- <template>
- <DxDataGrid ... >
- <DxLoadPanel :enabled="true" />
- </DxDataGrid>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import DxDataGrid, {
- DxLoadPanel
- } from 'devextreme-vue/data-grid';
- export default {
- components: {
- DxDataGrid,
- DxLoadPanel
- },
- // ...
- }
- </script>
You can also control the load panel programmatically using the beginCustomLoading(messageText) and endCustomLoading() methods.
- <template>
- <DxDataGrid ref="dataGridRefKey">
- <!-- ... -->
- </DxDataGrid>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import DxDataGrid, {
- // ...
- } from 'devextreme-vue/data-grid';
- const dataGridRefKey = "my-data-grid";
- export default {
- components: {
- DxDataGrid,
- // ...
- },
- data: function() {
- return {
- dataGridRefKey
- };
- },
- methods: {
- performLongOperation: function() {
- this.dataGrid.beginCustomLoading();
- // ...
- this.dataGrid.endCustomLoading();
- }
- },
- computed: {
- dataGrid: function() {
- return this.$refs[dataGridRefKey].instance;
- }
- }
- }
- </script>
Since the load panel is a DevExtreme LoadPanel UI component, you can declare any properties of this UI component in the DataGrid'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.
- <template>
- <DxDataGrid ... >
- <DxLoadPanel
- :height="100"
- :width="250"
- indicator-src="https://js.devexpress.com/Content/data/loadingIcons/rolling.svg"
- />
- </DxDataGrid>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import DxDataGrid, {
- DxLoadPanel
- } from 'devextreme-vue/data-grid';
- export default {
- components: {
- DxDataGrid,
- DxLoadPanel
- },
- // ...
- }
- </script>
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.