Configuration loadPanel

Specifies options configuring the load panel.

Type: Object

When PivotGrid operates with a large number of records or uses a remote storage as a data source, loading data takes time. As data is being prepared, PivotGrid displays a load panel.

The load panel consists of a pane, a loading indicator and a text. You can specify whether the pane or loading indicator must be displayed using the showPane or showIndicator options respectively. The text displayed by the load panel can be specified using the text option. Also, you can change the height or width of the load panel using the corresponding options of the loadPanel configuration object.

Since the grid load panel is practically the DevExtreme LoadPanel widget, you can specify any option belonging to this widget in the loadPanel object.

Show Example:
AngularJS
Knockout
jQuery

Use the radio group below the pivot grid to change the loading indicator of the load panel. To invoke the load panel after making the change, click the "Reload Data" button. The loading indicators are created on the loading.io website.

<div ng-controller="pivotGridController">
    <div style="height:180px; max-width:750px; margin:0 auto" dx-pivot-grid="{
        dataSource: {
            fields: [
                { dataField: '[Product].[Category]', area: 'row' },
                { dataField: '[Product].[Subcategory]', area: 'row' },
                { dataField: '[Ship Date].[Calendar Year]', area: 'column' },
                { dataField: '[Ship Date].[Month of Year]', area: 'column' },
                { dataField: '[Measures].[Customer Count]', area: 'data' }
            ],
            store: {
                type: 'xmla',
                url: 'https://demos.devexpress.com/Services/OLAP/msmdpump.dll',
                catalog: 'Adventure Works DW Standard Edition',
                cube: 'Adventure Works'
            }
        },
        fieldChooser: { enabled: false },
        onInitialized: savePivotGridInstance,
        bindingOptions: {
            'loadPanel.indicatorSrc': 'indicatorSrc'
        }
    }"></div>
    <div style="height:80px; text-align:center">
        Choose a Loading Indicator:&nbsp;
        <div style="display:inline-block; vertical-align:middle" dx-radio-group="{
            dataSource: [
                { name: '1', value: '/Content/data/loadingIcons/default.svg' },
                { name: '2', value: '/Content/data/loadingIcons/ring.svg' },
                { name: '3', value: '/Content/data/loadingIcons/rolling.svg' }
            ],
            valueExpr: 'value',
            displayExpr: 'name', 
            layout: 'horizontal',
            bindingOptions: {
                value: 'indicatorSrc'
            }
        }"></div>
        <div style="display:block; margin:0 auto; margin-top:10px" dx-button="{
            text: 'Reload Data',
            width: 150,
            onClick: reloadData
        }"></div>
    </div>
</div>
angular
    .module('myApp', ['dx'])
    .controller('pivotGridController', function ($scope) {
        $scope.indicatorSrc = undefined;
        $scope.pivotGridInstance = {};
        $scope.savePivotGridInstance = function (e) {
            $scope.pivotGridInstance = e.component;
        };
        $scope.reloadData = function (e) {
            $scope.pivotGridInstance.getDataSource().load();
        }
    });
    
angular.element(document).ready(function () {
   angular.bootstrap(document, ['myApp']);
});

Use the radio group below the pivot grid to change the loading indicator of the load panel. To invoke the load panel after making the change, click the "Reload Data" button. The loading indicators are created on the loading.io website.

<div style="height:180px; max-width:750px; margin:0 auto" data-bind="dxPivotGrid: {
    dataSource: {
        fields: [
            { dataField: '[Product].[Category]', area: 'row' },
            { dataField: '[Product].[Subcategory]', area: 'row' },
            { dataField: '[Ship Date].[Calendar Year]', area: 'column' },
            { dataField: '[Ship Date].[Month of Year]', area: 'column' },
            { dataField: '[Measures].[Customer Count]', area: 'data' }
        ],
        store: {
            type: 'xmla',
            url: 'https://demos.devexpress.com/Services/OLAP/msmdpump.dll',
            catalog: 'Adventure Works DW Standard Edition',
            cube: 'Adventure Works'
        }
    },
    fieldChooser: { enabled: false },
    loadPanel: {
        indicatorSrc: indicatorSrc
    },
    onInitialized: function (e) {
        pivotGridInstance = e.component;
    }
}"></div>
<div style="height:80px; text-align:center">
    Choose a Loading Indicator:&nbsp;
    <div style="display:inline-block; vertical-align:middle" data-bind="dxRadioGroup: {
        dataSource: [
            { name: '1', value: '/Content/data/loadingIcons/default.svg' },
            { name: '2', value: '/Content/data/loadingIcons/ring.svg' },
            { name: '3', value: '/Content/data/loadingIcons/rolling.svg' }
        ],
        valueExpr: 'value',
        displayExpr: 'name', 
        value: indicatorSrc,
        layout: 'horizontal'
    }"></div>
    <div style="display:block; margin:0 auto; margin-top:10px" data-bind="dxButton: {
        text: 'Reload Data',
        width: 150,
        onClick: function (e) {
            pivotGridInstance.getDataSource().load();
        }
    }"></div>
</div>
var viewModel = {
    indicatorSrc: ko.observable(undefined),
    pivotGridInstance: {}
};

ko.applyBindings(viewModel);

Use the radio group below the pivot grid to change the loading indicator of the load panel. To invoke the load panel after making the change, click the "Reload Data" button. The loading indicators are created on the loading.io website.

<div id="pivotGridContainer" style="height:180px; max-width:750px; margin:0 auto"></div>
<div style="height:80px; text-align:center">
    Choose a Loading Indicator:&nbsp;
    <div id="radioGroupContainer" style="display:inline-block; vertical-align:middle"></div>
    <div id="buttonContainer" style="display:block; margin:0 auto; margin-top:10px"></div>
</div>
$(function () {
    $("#pivotGridContainer").dxPivotGrid({
        dataSource: {
            fields: [
                { dataField: "[Product].[Category]", area: "row" },
                { dataField: "[Product].[Subcategory]", area: "row" },
                { dataField: "[Ship Date].[Calendar Year]", area: "column" },
                { dataField: "[Ship Date].[Month of Year]", area: "column" },
                { dataField: "[Measures].[Customer Count]", area: "data" }
            ],
            store: {
                type: "xmla",
                url: "https://demos.devexpress.com/Services/OLAP/msmdpump.dll",
                catalog: "Adventure Works DW Standard Edition",
                cube: "Adventure Works"
            }
        },
        fieldChooser: { enabled: false }
    });
    
    $("#radioGroupContainer").dxRadioGroup({
        dataSource: [
            { name: '1', value: '/Content/data/loadingIcons/default.svg' },
            { name: '2', value: '/Content/data/loadingIcons/ring.svg' },
            { name: '3', value: '/Content/data/loadingIcons/rolling.svg' }
        ],
        valueExpr: 'value',
        displayExpr: 'name', 
        value: undefined,
        layout: 'horizontal',
        onValueChanged: function (e) {
            var pivotGrid = $('#pivotGridContainer').dxPivotGrid('instance');
            pivotGrid.option('loadPanel.indicatorSrc', e.value);
        }
    });
    
    $("#buttonContainer").dxButton({
        text: 'Reload Data',
        width: 150,
        onClick: function (e) {
            var pivotGrid = $('#pivotGridContainer').dxPivotGrid('instance');
            pivotGrid.getDataSource().load();
        }
    });
});

enabled

Enables or disables the load panel.

Type: Boolean
Default Value: true

height

Specifies the height of the load panel.

Type: Number
Default Value: 70

indicatorSrc

Specifies the URL pointing to an image that will be used as a load indicator.

Type: String
Default Value: ''

Show Example:
AngularJS
Knockout
jQuery

Use the radio group below the pivot grid to change the loading indicator of the load panel. To invoke the load panel after making the change, click the "Reload Data" button. The loading indicators are created on the loading.io website.

<div ng-controller="pivotGridController">
    <div style="height:180px; max-width:750px; margin:0 auto" dx-pivot-grid="{
        dataSource: {
            fields: [
                { dataField: '[Product].[Category]', area: 'row' },
                { dataField: '[Product].[Subcategory]', area: 'row' },
                { dataField: '[Ship Date].[Calendar Year]', area: 'column' },
                { dataField: '[Ship Date].[Month of Year]', area: 'column' },
                { dataField: '[Measures].[Customer Count]', area: 'data' }
            ],
            store: {
                type: 'xmla',
                url: 'https://demos.devexpress.com/Services/OLAP/msmdpump.dll',
                catalog: 'Adventure Works DW Standard Edition',
                cube: 'Adventure Works'
            }
        },
        fieldChooser: { enabled: false },
        onInitialized: savePivotGridInstance,
        bindingOptions: {
            'loadPanel.indicatorSrc': 'indicatorSrc'
        }
    }"></div>
    <div style="height:80px; text-align:center">
        Choose a Loading Indicator:&nbsp;
        <div style="display:inline-block; vertical-align:middle" dx-radio-group="{
            dataSource: [
                { name: '1', value: '/Content/data/loadingIcons/default.svg' },
                { name: '2', value: '/Content/data/loadingIcons/ring.svg' },
                { name: '3', value: '/Content/data/loadingIcons/rolling.svg' }
            ],
            valueExpr: 'value',
            displayExpr: 'name', 
            layout: 'horizontal',
            bindingOptions: {
                value: 'indicatorSrc'
            }
        }"></div>
        <div style="display:block; margin:0 auto; margin-top:10px" dx-button="{
            text: 'Reload Data',
            width: 150,
            onClick: reloadData
        }"></div>
    </div>
</div>
angular
    .module('myApp', ['dx'])
    .controller('pivotGridController', function ($scope) {
        $scope.indicatorSrc = undefined;
        $scope.pivotGridInstance = {};
        $scope.savePivotGridInstance = function (e) {
            $scope.pivotGridInstance = e.component;
        };
        $scope.reloadData = function (e) {
            $scope.pivotGridInstance.getDataSource().load();
        }
    });
    
angular.element(document).ready(function () {
   angular.bootstrap(document, ['myApp']);
});

Use the radio group below the pivot grid to change the loading indicator of the load panel. To invoke the load panel after making the change, click the "Reload Data" button. The loading indicators are created on the loading.io website.

<div style="height:180px; max-width:750px; margin:0 auto" data-bind="dxPivotGrid: {
    dataSource: {
        fields: [
            { dataField: '[Product].[Category]', area: 'row' },
            { dataField: '[Product].[Subcategory]', area: 'row' },
            { dataField: '[Ship Date].[Calendar Year]', area: 'column' },
            { dataField: '[Ship Date].[Month of Year]', area: 'column' },
            { dataField: '[Measures].[Customer Count]', area: 'data' }
        ],
        store: {
            type: 'xmla',
            url: 'https://demos.devexpress.com/Services/OLAP/msmdpump.dll',
            catalog: 'Adventure Works DW Standard Edition',
            cube: 'Adventure Works'
        }
    },
    fieldChooser: { enabled: false },
    loadPanel: {
        indicatorSrc: indicatorSrc
    },
    onInitialized: function (e) {
        pivotGridInstance = e.component;
    }
}"></div>
<div style="height:80px; text-align:center">
    Choose a Loading Indicator:&nbsp;
    <div style="display:inline-block; vertical-align:middle" data-bind="dxRadioGroup: {
        dataSource: [
            { name: '1', value: '/Content/data/loadingIcons/default.svg' },
            { name: '2', value: '/Content/data/loadingIcons/ring.svg' },
            { name: '3', value: '/Content/data/loadingIcons/rolling.svg' }
        ],
        valueExpr: 'value',
        displayExpr: 'name', 
        value: indicatorSrc,
        layout: 'horizontal'
    }"></div>
    <div style="display:block; margin:0 auto; margin-top:10px" data-bind="dxButton: {
        text: 'Reload Data',
        width: 150,
        onClick: function (e) {
            pivotGridInstance.getDataSource().load();
        }
    }"></div>
</div>
var viewModel = {
    indicatorSrc: ko.observable(undefined),
    pivotGridInstance: {}
};

ko.applyBindings(viewModel);

Use the radio group below the pivot grid to change the loading indicator of the load panel. To invoke the load panel after making the change, click the "Reload Data" button. The loading indicators are created on the loading.io website.

<div id="pivotGridContainer" style="height:180px; max-width:750px; margin:0 auto"></div>
<div style="height:80px; text-align:center">
    Choose a Loading Indicator:&nbsp;
    <div id="radioGroupContainer" style="display:inline-block; vertical-align:middle"></div>
    <div id="buttonContainer" style="display:block; margin:0 auto; margin-top:10px"></div>
</div>
$(function () {
    $("#pivotGridContainer").dxPivotGrid({
        dataSource: {
            fields: [
                { dataField: "[Product].[Category]", area: "row" },
                { dataField: "[Product].[Subcategory]", area: "row" },
                { dataField: "[Ship Date].[Calendar Year]", area: "column" },
                { dataField: "[Ship Date].[Month of Year]", area: "column" },
                { dataField: "[Measures].[Customer Count]", area: "data" }
            ],
            store: {
                type: "xmla",
                url: "https://demos.devexpress.com/Services/OLAP/msmdpump.dll",
                catalog: "Adventure Works DW Standard Edition",
                cube: "Adventure Works"
            }
        },
        fieldChooser: { enabled: false }
    });
    
    $("#radioGroupContainer").dxRadioGroup({
        dataSource: [
            { name: '1', value: '/Content/data/loadingIcons/default.svg' },
            { name: '2', value: '/Content/data/loadingIcons/ring.svg' },
            { name: '3', value: '/Content/data/loadingIcons/rolling.svg' }
        ],
        valueExpr: 'value',
        displayExpr: 'name', 
        value: undefined,
        layout: 'horizontal',
        onValueChanged: function (e) {
            var pivotGrid = $('#pivotGridContainer').dxPivotGrid('instance');
            pivotGrid.option('loadPanel.indicatorSrc', e.value);
        }
    });
    
    $("#buttonContainer").dxButton({
        text: 'Reload Data',
        width: 150,
        onClick: function (e) {
            var pivotGrid = $('#pivotGridContainer').dxPivotGrid('instance');
            pivotGrid.getDataSource().load();
        }
    });
});

showIndicator

Specifies whether or not to show a load indicator.

Type: Boolean
Default Value: true

Show Example:
AngularJS
Knockout
jQuery

Use the switch below the pivot grid to change the visibility of the loading indicator. To invoke the load panel after making the change, click the "Reload Data" button.

<div ng-controller="pivotGridController">
    <div style="height:180px; max-width:750px; margin:0 auto" dx-pivot-grid="{
        dataSource: {
            fields: [
                { dataField: '[Product].[Category]', area: 'row' },
                { dataField: '[Product].[Subcategory]', area: 'row' },
                { dataField: '[Ship Date].[Calendar Year]', area: 'column' },
                { dataField: '[Ship Date].[Month of Year]', area: 'column' },
                { dataField: '[Measures].[Customer Count]', area: 'data' }
            ],
            store: {
                type: 'xmla',
                url: 'https://demos.devexpress.com/Services/OLAP/msmdpump.dll',
                catalog: 'Adventure Works DW Standard Edition',
                cube: 'Adventure Works'
            }
        },
        fieldChooser: { enabled: false },
        onInitialized: savePivotGridInstance,
        bindingOptions: {
            'loadPanel.showIndicator': 'showLoadingIndicator'
        }
    }"></div>
    <div style="height:80px; text-align:center">
        Show the Loading Indicator:&nbsp;
        <div style="display:inline-block; vertical-align:middle" ng-model="showLoadingIndicator" dx-switch="{
            onText: 'true',
            offText: 'false'
        }"></div>
        <div style="display:block; margin:0 auto; margin-top:10px" dx-button="{
            text: 'Reload Data',
            width: 150,
            onClick: reloadData
        }"></div>
    </div>
</div>
angular
    .module('myApp', ['dx'])
    .controller('pivotGridController', function ($scope) {
        $scope.showLoadingIndicator = true;
        $scope.pivotGridInstance = {};
        $scope.savePivotGridInstance = function (e) {
            $scope.pivotGridInstance = e.component;
        };
        $scope.reloadData = function (e) {
            $scope.pivotGridInstance.getDataSource().load();
        }
    });
    
angular.element(document).ready(function () {
   angular.bootstrap(document, ['myApp']);
});

Use the switch below the pivot grid to change the visibility of the loading indicator. To invoke the load panel after making the change, click the "Reload Data" button.

<div style="height:180px; max-width:750px; margin:0 auto" data-bind="dxPivotGrid: {
    dataSource: {
        fields: [
            { dataField: '[Product].[Category]', area: 'row' },
            { dataField: '[Product].[Subcategory]', area: 'row' },
            { dataField: '[Ship Date].[Calendar Year]', area: 'column' },
            { dataField: '[Ship Date].[Month of Year]', area: 'column' },
            { dataField: '[Measures].[Customer Count]', area: 'data' }
        ],
        store: {
            type: 'xmla',
            url: 'https://demos.devexpress.com/Services/OLAP/msmdpump.dll',
            catalog: 'Adventure Works DW Standard Edition',
            cube: 'Adventure Works'
        }
    },
    fieldChooser: { enabled: false },
    loadPanel: {
        showIndicator: showLoadingIndicator
    },
    onInitialized: function (e) {
        pivotGridInstance = e.component;
    }
}"></div>
<div style="height:80px; text-align:center">
    Show the Loading Indicator:&nbsp;
    <div style="display:inline-block; vertical-align:middle" data-bind="dxSwitch: {
        onText: 'true',
        offText: 'false',
        value: showLoadingIndicator
    }"></div>
    <div style="display:block; margin:0 auto; margin-top:10px" data-bind="dxButton: {
        text: 'Reload Data',
        width: 150,
        onClick: function (e) {
            pivotGridInstance.getDataSource().load();
        }
    }"></div>
</div>
var viewModel = {
    showLoadingIndicator: ko.observable(true),
    pivotGridInstance: {}
};

ko.applyBindings(viewModel);

Use the switch below the pivot grid to change the visibility of the loading indicator. To invoke the load panel after making the change, click the "Reload Data" button.

<div id="pivotGridContainer" style="height:180px; max-width:750px; margin:0 auto"></div>
<div style="height:80px; text-align:center">
    Show the Loading Indicator:&nbsp;
    <div id="switchContainer" style="display:inline-block; vertical-align:middle"></div>
    <div id="buttonContainer" style="display:block; margin:0 auto; margin-top:10px"></div>
</div>
$(function () {
    $("#pivotGridContainer").dxPivotGrid({
        dataSource: {
            fields: [
                { dataField: "[Product].[Category]", area: "row" },
                { dataField: "[Product].[Subcategory]", area: "row" },
                { dataField: "[Ship Date].[Calendar Year]", area: "column" },
                { dataField: "[Ship Date].[Month of Year]", area: "column" },
                { dataField: "[Measures].[Customer Count]", area: "data" }
            ],
            store: {
                type: "xmla",
                url: "https://demos.devexpress.com/Services/OLAP/msmdpump.dll",
                catalog: "Adventure Works DW Standard Edition",
                cube: "Adventure Works"
            }
        },
        fieldChooser: { enabled: false }
    });
    
    $("#switchContainer").dxSwitch({
        onText: 'true',
        offText: 'false',
        value: true,
        onValueChanged: function (e) {
            var pivotGrid = $('#pivotGridContainer').dxPivotGrid('instance');
            pivotGrid.option('loadPanel.showIndicator', e.value);
        }
    });
    
    $("#buttonContainer").dxButton({
        text: 'Reload Data',
        width: 150,
        onClick: function (e) {
            var pivotGrid = $('#pivotGridContainer').dxPivotGrid('instance');
            pivotGrid.getDataSource().load();
        }
    });
});

showPane

Specifies whether or not to show load panel background.

Type: Boolean
Default Value: true

Show Example:
AngularJS
Knockout
jQuery

Use the switch below the pivot grid to make the pane of the load panel visible/invisible. To invoke the load panel after making the change, click the "Reload Data" button.

<div ng-controller="pivotGridController">
    <div style="height:180px; max-width:750px; margin:0 auto" dx-pivot-grid="{
        dataSource: {
            fields: [
                { dataField: '[Product].[Category]', area: 'row' },
                { dataField: '[Product].[Subcategory]', area: 'row' },
                { dataField: '[Ship Date].[Calendar Year]', area: 'column' },
                { dataField: '[Ship Date].[Month of Year]', area: 'column' },
                { dataField: '[Measures].[Customer Count]', area: 'data' }
            ],
            store: {
                type: 'xmla',
                url: 'https://demos.devexpress.com/Services/OLAP/msmdpump.dll',
                catalog: 'Adventure Works DW Standard Edition',
                cube: 'Adventure Works'
            }
        },
        fieldChooser: { enabled: false },
        onInitialized: savePivotGridInstance,
        bindingOptions: {
            'loadPanel.showPane': 'showPane'
        }
    }"></div>
    <div style="height:80px; text-align:center">
        Show the Pane of the Load Panel:&nbsp;
        <div style="display:inline-block; vertical-align:middle" ng-model="showPane" dx-switch="{
            onText: 'true',
            offText: 'false'
        }"></div>
        <div style="display:block; margin:0 auto; margin-top:10px" dx-button="{
            text: 'Reload Data',
            width: 150,
            onClick: reloadData
        }"></div>
    </div>
</div>
angular
    .module('myApp', ['dx'])
    .controller('pivotGridController', function ($scope) {
        $scope.showPane = true;
        $scope.pivotGridInstance = {};
        $scope.savePivotGridInstance = function (e) {
            $scope.pivotGridInstance = e.component;
        };
        $scope.reloadData = function (e) {
            $scope.pivotGridInstance.getDataSource().load();
        }
    });
    
angular.element(document).ready(function () {
   angular.bootstrap(document, ['myApp']);
});

Use the switch below the pivot grid to make the pane of the load panel visible/invisible. To invoke the load panel after making the change, click the "Reload Data" button.

<div style="height:180px; max-width:750px; margin:0 auto" data-bind="dxPivotGrid: {
    dataSource: {
        fields: [
            { dataField: '[Product].[Category]', area: 'row' },
            { dataField: '[Product].[Subcategory]', area: 'row' },
            { dataField: '[Ship Date].[Calendar Year]', area: 'column' },
            { dataField: '[Ship Date].[Month of Year]', area: 'column' },
            { dataField: '[Measures].[Customer Count]', area: 'data' }
        ],
        store: {
            type: 'xmla',
            url: 'https://demos.devexpress.com/Services/OLAP/msmdpump.dll',
            catalog: 'Adventure Works DW Standard Edition',
            cube: 'Adventure Works'
        }
    },
    fieldChooser: { enabled: false },
    loadPanel: {
        showPane: showPane
    },
    onInitialized: function (e) {
        pivotGridInstance = e.component;
    }
}"></div>
<div style="height:80px; text-align:center">
    Show the Pane of the Load Panel:&nbsp;
    <div style="display:inline-block; vertical-align:middle" data-bind="dxSwitch: {
        onText: 'true',
        offText: 'false',
        value: showPane
    }"></div>
    <div style="display:block; margin:0 auto; margin-top:10px" data-bind="dxButton: {
        text: 'Reload Data',
        width: 150,
        onClick: function (e) {
            pivotGridInstance.getDataSource().load();
        }
    }"></div>
</div>
var viewModel = {
    showPane: ko.observable(true),
    pivotGridInstance: {}
};

ko.applyBindings(viewModel);

Use the switch below the pivot grid to make the pane of the load panel visible/invisible. To invoke the load panel after making the change, click the "Reload Data" button.

<div id="pivotGridContainer" style="height:180px; max-width:750px; margin:0 auto"></div>
<div style="height:80px; text-align:center">
    Show the Pane of the Load Panel:&nbsp;
    <div id="switchContainer" style="display:inline-block; vertical-align:middle"></div>
    <div id="buttonContainer" style="display:block; margin:0 auto; margin-top:10px"></div>
</div>
$(function () {
    $("#pivotGridContainer").dxPivotGrid({
        dataSource: {
            fields: [
                { dataField: "[Product].[Category]", area: "row" },
                { dataField: "[Product].[Subcategory]", area: "row" },
                { dataField: "[Ship Date].[Calendar Year]", area: "column" },
                { dataField: "[Ship Date].[Month of Year]", area: "column" },
                { dataField: "[Measures].[Customer Count]", area: "data" }
            ],
            store: {
                type: "xmla",
                url: "https://demos.devexpress.com/Services/OLAP/msmdpump.dll",
                catalog: "Adventure Works DW Standard Edition",
                cube: "Adventure Works"
            }
        },
        fieldChooser: { enabled: false }
    });
    
    $("#switchContainer").dxSwitch({
        onText: 'true',
        offText: 'false',
        value: true,
        onValueChanged: function (e) {
            var pivotGrid = $('#pivotGridContainer').dxPivotGrid('instance');
            pivotGrid.option('loadPanel.showPane', e.value);
        }
    });
    
    $("#buttonContainer").dxButton({
        text: 'Reload Data',
        width: 150,
        onClick: function (e) {
            var pivotGrid = $('#pivotGridContainer').dxPivotGrid('instance');
            pivotGrid.getDataSource().load();
        }
    });
});

text

Specifies the text to display inside a load panel.

Type: String
Default Value: 'Loading...'

Show Example:
AngularJS
Knockout
jQuery

In this demo, you can change the text of the load panel at runtime. Type any text in the text box below the pivot grid. Then, click the "Reload Data" button to invoke the load panel. It will display the specified text.

<div ng-controller="pivotGridController">
    <div style="height:180px; max-width:750px; margin:0 auto" dx-pivot-grid="{
        dataSource: {
            fields: [
                { dataField: '[Product].[Category]', area: 'row' },
                { dataField: '[Product].[Subcategory]', area: 'row' },
                { dataField: '[Ship Date].[Calendar Year]', area: 'column' },
                { dataField: '[Ship Date].[Month of Year]', area: 'column' },
                { dataField: '[Measures].[Customer Count]', area: 'data' }
            ],
            store: {
                type: 'xmla',
                url: 'https://demos.devexpress.com/Services/OLAP/msmdpump.dll',
                catalog: 'Adventure Works DW Standard Edition',
                cube: 'Adventure Works'
            }
        },
        fieldChooser: { enabled: false },
        onInitialized: savePivotGridInstance,
        bindingOptions: {
            'loadPanel.text': 'loadPanelText'
        }
    }"></div>
    <div style="height:40px; width:300px; margin-top:10px; margin:0 auto" ng-model="loadPanelText" dx-text-box="{
        placeholder: 'Type the Load Panel Text in Here...'
    }"></div>
    <div style="height:40px; display:block; margin:0 auto; margin-top:10px" dx-button="{
        text: 'Reload Data',
        width: 150,
        onClick: reloadData
    }"></div>
</div>
angular
    .module('myApp', ['dx'])
    .controller('pivotGridController', function ($scope) {
        $scope.loadPanelText = 'Loading...';
        $scope.pivotGridInstance = {};
        $scope.savePivotGridInstance = function (e) {
            $scope.pivotGridInstance = e.component;
        };
        $scope.reloadData = function (e) {
            $scope.pivotGridInstance.getDataSource().load();
        }
    });
    
angular.element(document).ready(function () {
   angular.bootstrap(document, ['myApp']);
});

In this demo, you can change the text of the load panel at runtime. Type any text in the text box below the pivot grid. Then, click the "Reload Data" button to invoke the load panel. It will display the specified text.

<div style="height:180px; max-width:750px; margin:0 auto" data-bind="dxPivotGrid: {
    dataSource: {
        fields: [
            { dataField: '[Product].[Category]', area: 'row' },
            { dataField: '[Product].[Subcategory]', area: 'row' },
            { dataField: '[Ship Date].[Calendar Year]', area: 'column' },
            { dataField: '[Ship Date].[Month of Year]', area: 'column' },
            { dataField: '[Measures].[Customer Count]', area: 'data' }
        ],
        store: {
            type: 'xmla',
            url: 'https://demos.devexpress.com/Services/OLAP/msmdpump.dll',
            catalog: 'Adventure Works DW Standard Edition',
            cube: 'Adventure Works'
        }
    },
    fieldChooser: { enabled: false },
    loadPanel: {
        text: loadPanelText
    },
    onInitialized: function (e) {
        pivotGridInstance = e.component;
    }
}"></div>
<div style="height:40px; width:300px; margin-top:10px; margin:0 auto" data-bind="dxTextBox: {
    placeholder: 'Type the Load Panel Text in Here...',
    value: loadPanelText
}"></div>
<div style="height:40px; display:block; margin:0 auto; margin-top:10px" data-bind="dxButton: {
    text: 'Reload Data',
    width: 150,
    onClick: function (e) {
        pivotGridInstance.getDataSource().load();
    }
}"></div>
var viewModel = {
    loadPanelText: ko.observable('Loading...'),
    pivotGridInstance: {}
};

ko.applyBindings(viewModel);

In this demo, you can change the text of the load panel at runtime. Type any text in the text box below the pivot grid. Then, click the "Reload Data" button to invoke the load panel. It will display the specified text.

<div id="pivotGridContainer" style="height:180px; max-width:750px; margin:0 auto"></div>
<div id="textBoxContainer" style="height:40px; width:300px; margin-top:10px; margin:0 auto"></div>
<div id="buttonContainer" style="height:40px; display:block; margin:0 auto; margin-top:10px"></div>
$(function () {
    $("#pivotGridContainer").dxPivotGrid({
        dataSource: {
            fields: [
                { dataField: "[Product].[Category]", area: "row" },
                { dataField: "[Product].[Subcategory]", area: "row" },
                { dataField: "[Ship Date].[Calendar Year]", area: "column" },
                { dataField: "[Ship Date].[Month of Year]", area: "column" },
                { dataField: "[Measures].[Customer Count]", area: "data" }
            ],
            store: {
                type: "xmla",
                url: "https://demos.devexpress.com/Services/OLAP/msmdpump.dll",
                catalog: "Adventure Works DW Standard Edition",
                cube: "Adventure Works"
            }
        },
        fieldChooser: { enabled: false }
    });
    
    $("#textBoxContainer").dxTextBox({
        placeholder: "Type the Load Panel Text in Here...",
        value: 'Loading...',
        onValueChanged: function (e) {
            var pivotGrid = $('#pivotGridContainer').dxPivotGrid('instance');
            pivotGrid.option('loadPanel.text', e.value);
        }
    });
    
    $("#buttonContainer").dxButton({
        text: 'Reload Data',
        width: 150,
        onClick: function (e) {
            var pivotGrid = $('#pivotGridContainer').dxPivotGrid('instance');
            pivotGrid.getDataSource().load();
        }
    });
});

width

Specifies the width of the load panel.

Type: Number
Default Value: 200