Configuration loadPanel

    Specifies options configuring the load panel.

    Type: Object

    When dxDataGrid 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, dxDataGrid 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.

    Additionally, you can show/hide the load panel from code when using the beginCustomLoading(messageText) and endCustomLoading() methods.

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

    Show Example:
    AngularJS
    Knockout
    jQuery

    In this example, several settings of the load panel are changed using the fields of the loadPanel object. To see the changes, refresh the grid's data source by clicking the "Refresh" button. Data for this example is obtained from www.odata.org.

    <div ng-controller="demoController" style="text-align:center; height:400px; max-width:630px; margin: 0 auto">
        <div style="height:350px; margin: 5px auto" dx-data-grid="{
            dataSource: {
                store: {
                    type: 'odata',
                    jsonp: true,
                    url: 'https://services.odata.org/v2/Northwind/Northwind.svc/Orders'
                }
            },
            scrolling: { mode: 'virtual' },
            columns: columns,
            onContentReady: getDataGrid,
            loadPanel: {
                height: 150,
                width: 400,
                text: 'Data is loading...'
            }
        }"></div>
        <div dx-button="{
            text: 'Refresh',
            onClick: refreshGrid
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.columns = [
            { dataField: 'OrderID', width: 90 },
            { dataField: 'ShipName', caption: 'Name', width: 190 },
            { dataField: 'ShipCity', caption: 'City' },
            { dataField: 'ShipCountry', caption: 'Country' },
            'OrderDate',
            'RequiredDate'
        ];
        $scope.dataGrid = null;
        $scope.getDataGrid = function (e) { dataGrid = e.component };
        $scope.refreshGrid = function () { dataGrid.refresh() }
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    In this example, several settings of the load panel are changed using the fields of the loadPanel object. To see the changes, refresh the grid's data source by clicking the "Refresh" button. Data for this example is obtained from www.odata.org.

    <div style="text-align:center; height:400px; max-width:630px; margin: 0 auto">
        <div style="height:350px; margin: 5px auto" data-bind="dxDataGrid: {
        dataSource: {
            store: {
                type: 'odata',
                jsonp: true,
                url: 'https://services.odata.org/v2/Northwind/Northwind.svc/Orders'
            }
        },
        scrolling: { mode: 'virtual' },
        columns: columns,
        onContentReady: getDataGrid,
        loadPanel: {
            height: 150,
            width: 400,
            text: 'Data is loading...'
        }
    }"></div>
        <div data-bind="dxButton: {
        text: 'Refresh',
        onClick: refreshGrid
    }"></div>
    </div>
    
    var myViewModel = {
        columns: [
            { dataField: 'OrderID', width: 90 },
            { dataField: 'ShipName', caption: 'Name', width: 190 },
            { dataField: 'ShipCity', caption: 'City' },
            { dataField: 'ShipCountry', caption: 'Country' },
            'OrderDate',
            'RequiredDate'
        ],
        dataGrid: null,
        getDataGrid: function (e) { dataGrid = e.component },
        refreshGrid: function () { dataGrid.refresh() }
    }
    ko.applyBindings(myViewModel);
    

    In this example, several settings of the load panel are changed using the fields of the loadPanel object. To see the changes, refresh the grid's data source by clicking the "Refresh" button. Data for this example is obtained from www.odata.org.

    <div id="gridContainer" style="height: 350px; max-width: 800px; margin: 0 auto"></div>
    <div style="text-align: center; margin: 10px auto">
        <div id="buttonContainer" style="height: 40px"></div>
    </div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: {
                store: {
                    type: 'odata',
                    jsonp: true,
                    url: 'https://services.odata.org/v2/Northwind/Northwind.svc/Orders'
                }
            },
            scrolling: { mode: 'virtual' },
            columns: [
                { dataField: 'OrderID', width: 90 },
                { dataField: 'ShipName', caption: 'Name', width: 190 },
                { dataField: 'ShipCity', caption: 'City' },
                { dataField: 'ShipCountry', caption: 'Country' },
                'OrderDate',
                'RequiredDate'
            ],
            loadPanel: {
                height: 150,
                width: 400,
                text: 'Data is loading...'
            }
        });
    
        $("#buttonContainer").dxButton({
            text: 'Refresh',
            onClick: function () {
                var dataGrid = $('#gridContainer').dxDataGrid('instance');
                dataGrid.refresh();
            }
        });
    });
    

    enabled

    Specifies whether to show the load panel or not.

    Type: Boolean
    Default Value: true

    Show Example:
    AngularJS
    Knockout
    jQuery

    In this example, you can enable/disable the load panel. To see the changes, refresh the grid's data source by clicking the "Refresh" button. Data for this example is obtained from www.odata.org.

    <div ng-controller="demoController" style="text-align:center; height:400px; max-width:630px; margin: 0 auto">
        <div style="height:350px; margin: 5px auto" dx-data-grid="{
            dataSource: {
                store: {
                    type: 'odata',
                    jsonp: true,
                    url: 'https://services.odata.org/v2/Northwind/Northwind.svc/Orders'
                }
            },
            scrolling: { mode: 'virtual' },
            columns: columns,
            onContentReady: getDataGrid,
            bindingOptions: {
                'loadPanel.enabled': 'checkBoxState'
            }
        }"></div>
        <div dx-check-box="{
            text: 'Enable the Load Panel',
            bindingOptions: {
                value: 'checkBoxState'
            }
        }"></div>
        <div dx-button="{
            text: 'Refresh',
            onClick: refreshGrid
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.columns = [
            { dataField: 'OrderID', width: 90 },
            { dataField: 'ShipName', caption: 'Name', width: 190 },
            { dataField: 'ShipCity', caption: 'City' },
            { dataField: 'ShipCountry', caption: 'Country' },
            'OrderDate',
            'RequiredDate'
        ];
        $scope.checkBoxState = true;
        $scope.dataGrid = null;
        $scope.getDataGrid = function (e) { dataGrid = e.component };
        $scope.refreshGrid = function () { dataGrid.refresh() }
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    In this example, you can enable/disable the load panel. To see the changes, refresh the grid's data source by clicking the "Refresh" button. Data for this example is obtained from www.odata.org.

    <div style="text-align:center; height:400px; max-width:630px; margin: 0 auto">
        <div style="height:350px; margin: 5px auto" data-bind="dxDataGrid: {
            dataSource: {
                store: {
                    type: 'odata',
                    jsonp: true,
                    url: 'https://services.odata.org/v2/Northwind/Northwind.svc/Orders'
                }
            },
            scrolling: { mode: 'virtual' },
            columns: columns,
            onContentReady: getDataGrid,
            loadPanel: {
                enabled: checkBoxState
            }
        }"></div>
        <div data-bind="dxCheckBox: {
            text: 'Enable the Load Panel',
            value: checkBoxState
        }"></div>
        <div data-bind="dxButton: {
            text: 'Refresh',
            onClick: refreshGrid
        }"></div>
    </div>
    
    var myViewModel = {
        columns: [
            { dataField: 'OrderID', width: 90 },
            { dataField: 'ShipName', caption: 'Name', width: 190 },
            { dataField: 'ShipCity', caption: 'City' },
            { dataField: 'ShipCountry', caption: 'Country' },
            'OrderDate',
            'RequiredDate'
        ],
        checkBoxState: ko.observable(true),
        dataGrid: null,
        getDataGrid: function (e) { dataGrid = e.component },
        refreshGrid: function () { dataGrid.refresh() }
    }
    ko.applyBindings(myViewModel);
    

    In this example, you can enable/disable the load panel. To see the changes, refresh the grid's data source by clicking the "Refresh" button. Data for this example is obtained from www.odata.org.

    <div id="gridContainer" style="height: 350px; max-width: 800px; margin: 0 auto"></div>
    <div style="height:75px; text-align: center; margin: 5px auto">
        <div id="checkboxContainer" style="height:25px; width:auto"></div>
        <div id="buttonContainer" style="margin: 10px auto"></div>
    </div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: {
                store: {
                    type: 'odata',
                    jsonp: true,
                    url: 'https://services.odata.org/v2/Northwind/Northwind.svc/Orders'
                }
            },
            scrolling: { mode: 'virtual' },
            columns: [
                { dataField: 'OrderID', width: 90 },
                { dataField: 'ShipName', caption: 'Name', width: 190 },
                { dataField: 'ShipCity', caption: 'City' },
                { dataField: 'ShipCountry', caption: 'Country' },
                'OrderDate',
                'RequiredDate'
            ]
        });
    
        $("#checkboxContainer").dxCheckBox({
            value: true,
            text: 'Enable the Load Panel',
            onValueChanged: function (info) {
                var dataGrid = $('#gridContainer').dxDataGrid('instance');
                dataGrid.option({
                    loadPanel: { enabled: info.value }
                });
            }
        });
    
        $("#buttonContainer").dxButton({
            text: 'Refresh',
            onClick: function () {
                var dataGrid = $('#gridContainer').dxDataGrid('instance');
                dataGrid.refresh();
            }
        });
    });
    

    height

    Specifies the height of the load panel in pixels.

    Type: Number
    Default Value: 90

    Show Example:
    AngularJS
    Knockout
    jQuery

    In this example, the height of the load panel is set to 100 using the loadPanel | height option. To see the changes, refresh the grid's data source by clicking the "Refresh" button. Data for this example is obtained from www.odata.org.

    <div ng-controller="demoController" style="text-align:center; height:400px; max-width:630px; margin: 0 auto">
        <div style="height:350px; margin: 5px auto" dx-data-grid="{
            dataSource: {
                store: {
                    type: 'odata',
                    jsonp: true,
                    url: 'https://services.odata.org/v2/Northwind/Northwind.svc/Orders'
                }
            },
            scrolling: { mode: 'virtual' },
            columns: columns,
            onContentReady: getDataGrid,
            loadPanel: { height: 150 }
        }"></div>
        <div dx-button="{
            text: 'Refresh',
            onClick: refreshGrid
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.columns = [
            { dataField: 'OrderID', width: 90 },
            { dataField: 'ShipName', caption: 'Name', width: 190 },
            { dataField: 'ShipCity', caption: 'City' },
            { dataField: 'ShipCountry', caption: 'Country' },
            'OrderDate',
            'RequiredDate'
        ];
        $scope.dataGrid = null;
        $scope.getDataGrid = function (e) { dataGrid = e.component };
        $scope.refreshGrid = function () { dataGrid.refresh() }
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    In this example, the height of the load panel is set to 100 using the loadPanel | height option. To see the changes, refresh the grid's data source by clicking the "Refresh" button. Data for this example is obtained from www.odata.org.

    <div style="text-align:center; height:400px; max-width:630px; margin: 0 auto">
        <div style="height:350px; margin: 5px auto" data-bind="dxDataGrid: {
            dataSource: {
                store: {
                    type: 'odata',
                    jsonp: true,
                    url: 'https://services.odata.org/v2/Northwind/Northwind.svc/Orders'
                }
            },
            scrolling: { mode: 'virtual' },
            columns: columns,
            onContentReady: getDataGrid,
            loadPanel: { height: 150 }
        }"></div>
        <div data-bind="dxButton: {
            text: 'Refresh',
            onClick: refreshGrid
        }"></div>
    </div>
    
    var myViewModel = {
        columns: [
            { dataField: 'OrderID', width: 90 },
            { dataField: 'ShipName', caption: 'Name', width: 190 },
            { dataField: 'ShipCity', caption: 'City' },
            { dataField: 'ShipCountry', caption: 'Country' },
            'OrderDate',
            'RequiredDate'
        ],
        dataGrid: null,
        getDataGrid: function (e) { dataGrid = e.component },
        refreshGrid: function () { dataGrid.refresh() }
    }
    ko.applyBindings(myViewModel);
    

    In this example, the height of the load panel is set to 100 using the loadPanel | height option. To see the changes, refresh the grid's data source by clicking the "Refresh" button. Data for this example is obtained from www.odata.org.

    <div id="gridContainer" style="height: 350px; max-width: 800px; margin: 0 auto"></div>
    <div style="text-align: center; margin: 10px auto">
        <div id="buttonContainer" style="height: 40px"></div>
    </div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: {
                store: {
                    type: 'odata',
                    jsonp: true,
                    url: 'https://services.odata.org/v2/Northwind/Northwind.svc/Orders'
                }
            },
            scrolling: { mode: 'virtual' },
            columns: [
                { dataField: 'OrderID', width: 90 },
                { dataField: 'ShipName', caption: 'Name', width: 190 },
                { dataField: 'ShipCity', caption: 'City' },
                { dataField: 'ShipCountry', caption: 'Country' },
                'OrderDate',
                'RequiredDate'
            ],
            loadPanel: { height: 150 }
        });
    
        $("#buttonContainer").dxButton({
            text: 'Refresh',
            onClick: function () {
                var dataGrid = $('#gridContainer').dxDataGrid('instance');
                dataGrid.refresh();
            }
        });
    });
    

    indicatorSrc

    Specifies a URL pointing to an image to be used as a loading indicator.

    Type: String
    Default Value: ''

    showIndicator

    Specifies whether or not a loading indicator must be displayed on the load panel.

    Type: Boolean
    Default Value: true

    Show Example:
    AngularJS
    Knockout
    jQuery

    In this example, you can change the visibility of the loading indicator on the load panel using the check box under the grid. To see the changes, refresh the grid's data source by clicking the "Refresh" button. Data for this example is obtained from www.odata.org.

    <div ng-controller="demoController" style="text-align:center; height:400px; max-width:630px; margin: 0 auto">
        <div style="height:350px; margin: 5px auto" dx-data-grid="{
            dataSource: {
                store: {
                    type: 'odata',
                    jsonp: true,
                    url: 'https://services.odata.org/v2/Northwind/Northwind.svc/Orders'
                }
            },
            scrolling: { mode: 'virtual' },
            columns: columns,
            onContentReady: getDataGrid,
            bindingOptions: {
                'loadPanel.showIndicator': 'checkBoxState'
            }
        }"></div>
        <div dx-check-box="{
            text: 'Show the Load Indicator on the Load Panel',
            bindingOptions: {
                value: 'checkBoxState'
            }
        }"></div>
        <div dx-button="{
            text: 'Refresh',
            onClick: refreshGrid
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.columns = [
            { dataField: 'OrderID', width: 90 },
            { dataField: 'ShipName', caption: 'Name', width: 190 },
            { dataField: 'ShipCity', caption: 'City' },
            { dataField: 'ShipCountry', caption: 'Country' },
            'OrderDate',
            'RequiredDate'
        ];
        $scope.checkBoxState = true;
        $scope.dataGrid = null;
        $scope.getDataGrid = function (e) { dataGrid = e.component };
        $scope.refreshGrid = function () { dataGrid.refresh() }
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    In this example, you can change the visibility of the loading indicator on the load panel using the check box under the grid. To see the changes, refresh the grid's data source by clicking the "Refresh" button. Data for this example is obtained from www.odata.org.

    <div style="text-align:center; height:400px; max-width:630px; margin: 0 auto">
        <div style="height:350px; margin: 5px auto" data-bind="dxDataGrid: {
            dataSource: {
                store: {
                    type: 'odata',
                    jsonp: true,
                    url: 'https://services.odata.org/v2/Northwind/Northwind.svc/Orders'
                }
            },
            scrolling: { mode: 'virtual' },
            columns: columns,
            onContentReady: getDataGrid,
            loadPanel: {
                showIndicator: checkBoxState
            }
        }"></div>
        <div data-bind="dxCheckBox: {
            text: 'Show the Load Indicator on the Load Panel',
            value: checkBoxState
        }"></div>
        <div data-bind="dxButton: {
            text: 'Refresh',
            onClick: refreshGrid
        }"></div>
    </div>
    
    var myViewModel = {
        columns: [
            { dataField: 'OrderID', width: 90 },
            { dataField: 'ShipName', caption: 'Name', width: 190 },
            { dataField: 'ShipCity', caption: 'City' },
            { dataField: 'ShipCountry', caption: 'Country' },
            'OrderDate',
            'RequiredDate'
        ],
        checkBoxState: ko.observable(true),
        dataGrid: null,
        getDataGrid: function (e) { dataGrid = e.component },
        refreshGrid: function () { dataGrid.refresh() }
    }
    ko.applyBindings(myViewModel);
    

    In this example, you can change the visibility of the loading indicator on the load panel using the check box under the grid. To see the changes, refresh the grid's data source by clicking the "Refresh" button. Data for this example is obtained from www.odata.org.

    <div id="gridContainer" style="height: 350px; max-width: 800px; margin: 0 auto"></div>
    <div style="text-align: center; height:75px; margin: 5px auto">
        <div id="checkboxContainer" style="height:25px; width:auto"></div>
        <div id="refreshButton" style="margin: 10px auto"></div>
    </div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: {
                store: {
                    type: 'odata',
                    jsonp: true,
                    url: 'https://services.odata.org/v2/Northwind/Northwind.svc/Orders'
                }
            },
            scrolling: { mode: 'virtual' },
            columns: [
                { dataField: 'OrderID', width: 90 },
                { dataField: 'ShipName', caption: 'Name', width: 190 },
                { dataField: 'ShipCity', caption: 'City' },
                { dataField: 'ShipCountry', caption: 'Country' },
                'OrderDate',
                'RequiredDate'
            ],
            loadPanel: { showIndicator: true }
        });
    
        $("#checkboxContainer").dxCheckBox({
            value: true,
            text: 'Show the Load Indicator on the Load Panel',
            onValueChanged: function (info) {
                var dataGrid = $('#gridContainer').dxDataGrid('instance');
                dataGrid.option({
                    loadPanel: { showIndicator: info.value }
                });
            }
        });
    
        $("#refreshButton").dxButton({
            text: 'Refresh',
            onClick: function () {
                var dataGrid = $('#gridContainer').dxDataGrid('instance');
                dataGrid.refresh();
            }
        });
    });
    

    showPane

    Specifies whether or not the pane of the load panel must be displayed.

    Type: Boolean
    Default Value: true

    Show Example:
    AngularJS
    Knockout
    jQuery

    In this example, you can change the visibility of the load panel pane using the check box under the grid. To see the changes, refresh the grid's data source by clicking the "Refresh" button. Data for this example is obtained from www.odata.org.

    <div ng-controller="demoController" style="text-align:center; height:400px; max-width:630px; margin: 0 auto">
        <div style="height:350px; margin: 5px auto" dx-data-grid="{
            dataSource: {
                store: {
                    type: 'odata',
                    jsonp: true,
                    url: 'https://services.odata.org/v2/Northwind/Northwind.svc/Orders'
                }
            },
            scrolling: { mode: 'virtual' },
            columns: columns,
            onContentReady: getDataGrid,
            bindingOptions: {
                'loadPanel.showPane': 'checkBoxState'
            }
        }"></div>
        <div dx-check-box="{
            text: 'Show the Pane of the Load Panel',
            bindingOptions: {
                value: 'checkBoxState'
            }
        }"></div>
        <div dx-button="{
            text: 'Refresh',
            onClick: refreshGrid
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.columns = [
            { dataField: 'OrderID', width: 90 },
            { dataField: 'ShipName', caption: 'Name', width: 190 },
            { dataField: 'ShipCity', caption: 'City' },
            { dataField: 'ShipCountry', caption: 'Country' },
            'OrderDate',
            'RequiredDate'
        ];
        $scope.checkBoxState = true;
        $scope.dataGrid = null;
        $scope.getDataGrid = function (e) { dataGrid = e.component };
        $scope.refreshGrid = function () { dataGrid.refresh() }
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    In this example, you can change the visibility of the load panel pane using the check box under the grid. To see the changes, refresh the grid's data source by clicking the "Refresh" button. Data for this example is obtained from www.odata.org.

    <div style="text-align:center; height:400px; max-width:630px; margin: 0 auto">
        <div style="height:350px; margin: 5px auto" data-bind="dxDataGrid: {
            dataSource: {
                store: {
                    type: 'odata',
                    jsonp: true,
                    url: 'https://services.odata.org/v2/Northwind/Northwind.svc/Orders'
                }
            },
            scrolling: { mode: 'virtual' },
            columns: columns,
            onContentReady: getDataGrid,
            loadPanel: {
                showPane: checkBoxState
            }
        }"></div>
        <div data-bind="dxCheckBox: {
            text: 'Show the Pane of the Load Panel',
            value: checkBoxState
        }"></div>
        <div data-bind="dxButton: {
            text: 'Refresh',
            onClick: refreshGrid
        }"></div>
    </div>
    
    var myViewModel = {
        columns: [
            { dataField: 'OrderID', width: 90 },
            { dataField: 'ShipName', caption: 'Name', width: 190 },
            { dataField: 'ShipCity', caption: 'City' },
            { dataField: 'ShipCountry', caption: 'Country' },
            'OrderDate',
            'RequiredDate'
        ],
        checkBoxState: ko.observable(true),
        dataGrid: null,
        getDataGrid: function (e) { dataGrid = e.component },
        refreshGrid: function () { dataGrid.refresh() }
    }
    ko.applyBindings(myViewModel);
    

    In this example, you can change the visibility of the load panel pane using the check box under the grid. To see the changes, refresh the grid's data source by clicking the "Refresh" button. Data for this example is obtained from www.odata.org.

    <div id="gridContainer" style="height: 350px; max-width: 800px; margin: 0 auto"></div>
    <div style="text-align: center; height:75px; margin: 5px auto">
        <div id="checkboxContainer" style="height:25px; width:auto"></div>
        <div id="refreshButton" style="margin: 10px auto"></div>
    </div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: {
                store: {
                    type: 'odata',
                    jsonp: true,
                    url: 'https://services.odata.org/v2/Northwind/Northwind.svc/Orders'
                }
            },
            scrolling: { mode: 'virtual' },
            columns: [
                { dataField: 'OrderID', width: 90 },
                { dataField: 'ShipName', caption: 'Name', width: 190 },
                { dataField: 'ShipCity', caption: 'City' },
                { dataField: 'ShipCountry', caption: 'Country' },
                'OrderDate',
                'RequiredDate'
            ],
            loadPanel: { showPane: true }
        });
    
        $("#checkboxContainer").dxCheckBox({
            value: true,
            text: 'Show the Pane of the Load Panel',
            onValueChanged: function (info) {
                var dataGrid = $('#gridContainer').dxDataGrid('instance');
                dataGrid.option({
                    loadPanel: { showPane: info.value }
                });
            }
        });
    
        $("#refreshButton").dxButton({
            text: 'Refresh',
            onClick: function () {
                var dataGrid = $('#gridContainer').dxDataGrid('instance');
                dataGrid.refresh();
            }
        });
    });
    

    text

    Specifies text displayed by the load panel.

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

    Show Example:
    AngularJS
    Knockout
    jQuery

    In this example, the text displayed by the load panel is changed using the loadPanel | text option. To see the changes, refresh the grid's data source by clicking the "Refresh" button. Data for this example are obtained from www.odata.org.

    <div ng-controller="demoController" style="text-align:center; height:400px; max-width:630px; margin: 0 auto">
        <div style="height:350px; margin: 5px auto" dx-data-grid="{
            dataSource: {
                store: {
                    type: 'odata',
                    jsonp: true,
                    url: 'https://services.odata.org/v2/Northwind/Northwind.svc/Orders'
                }
            },
            scrolling: { mode: 'virtual' },
            columns: columns,
            onContentReady: getDataGrid,
            loadPanel: { text: 'Data is loading...' }
        }"></div>
        <div dx-button="{
            text: 'Refresh',
            onClick: refreshGrid
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.columns = [
            { dataField: 'OrderID', width: 90 },
            { dataField: 'ShipName', caption: 'Name', width: 190 },
            { dataField: 'ShipCity', caption: 'City' },
            { dataField: 'ShipCountry', caption: 'Country' },
            'OrderDate',
            'RequiredDate'
        ];
        $scope.dataGrid = null;
        $scope.getDataGrid = function (e) { dataGrid = e.component };
        $scope.refreshGrid = function () { dataGrid.refresh() }
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    In this example, the text displayed by the load panel is changed using the loadPanel | text option. To see the changes, refresh the grid's data source by clicking the "Refresh" button. Data for this example are obtained from www.odata.org.

    <div style="text-align:center; height:400px; max-width:630px; margin: 0 auto">
        <div style="height:350px; margin: 5px auto" data-bind="dxDataGrid: {
            dataSource: {
                store: {
                    type: 'odata',
                    jsonp: true,
                    url: 'https://services.odata.org/v2/Northwind/Northwind.svc/Orders'
                }
            },
            scrolling: { mode: 'virtual' },
            columns: columns,
            onContentReady: getDataGrid,
            loadPanel: { text: 'Data is loading...' }
        }"></div>
        <div data-bind="dxButton: {
            text: 'Refresh',
            onClick: refreshGrid
        }"></div>
    </div>
    
    var myViewModel = {
        columns: [
            { dataField: 'OrderID', width: 90 },
            { dataField: 'ShipName', caption: 'Name', width: 190 },
            { dataField: 'ShipCity', caption: 'City' },
            { dataField: 'ShipCountry', caption: 'Country' },
            'OrderDate',
            'RequiredDate'
        ],
        dataGrid: null,
        getDataGrid: function (e) { dataGrid = e.component },
        refreshGrid: function () { dataGrid.refresh() }
    }
    ko.applyBindings(myViewModel);
    

    In this example, the text displayed by the load panel is changed using the loadPanel | text option. To see the changes, refresh the grid's data source by clicking the "Refresh" button. Data for this example are obtained from www.odata.org.

    <div id="gridContainer" style="height: 350px; max-width: 800px; margin: 0 auto"></div>
    <div style="text-align: center; margin: 10px auto">
        <div id="buttonContainer" style="height: 40px"></div>
    </div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: {
                store: {
                    type: 'odata',
                    jsonp: true,
                    url: 'https://services.odata.org/v2/Northwind/Northwind.svc/Orders'
                }
            },
            scrolling: { mode: 'virtual' },
            columns: [
                { dataField: 'OrderID', width: 90 },
                { dataField: 'ShipName', caption: 'Name', width: 190 },
                { dataField: 'ShipCity', caption: 'City' },
                { dataField: 'ShipCountry', caption: 'Country' },
                'OrderDate',
                'RequiredDate'
            ],
            loadPanel: { text: 'Data is loading...' }
        });
    
        $("#buttonContainer").dxButton({
            text: 'Refresh',
            onClick: function () {
                var dataGrid = $('#gridContainer').dxDataGrid('instance');
                dataGrid.refresh();
            }
        });
    });
    

    width

    Specifies the width of the load panel in pixels.

    Type: Number
    Default Value: 200

    Show Example:
    AngularJS
    Knockout
    jQuery

    In this example, the width of the load panel is set to 300 using the loadPanel | width option. To see the changes, refresh the grid's data source by clicking the "Refresh" button. Data for this example is obtained from www.odata.org.

    <div ng-controller="demoController" style="text-align:center; height:400px; max-width:630px; margin: 0 auto">
        <div style="height:350px; margin: 5px auto" dx-data-grid="{
            dataSource: {
                store: {
                    type: 'odata',
                    jsonp: true,
                    url: 'https://services.odata.org/v2/Northwind/Northwind.svc/Orders'
                }
            },
            scrolling: { mode: 'virtual' },
            columns: columns,
            onContentReady: getDataGrid,
            loadPanel: { width: 300 }
        }"></div>
        <div dx-button="{
            text: 'Refresh',
            onClick: refreshGrid
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.columns = [
            { dataField: 'OrderID', width: 90 },
            { dataField: 'ShipName', caption: 'Name', width: 190 },
            { dataField: 'ShipCity', caption: 'City' },
            { dataField: 'ShipCountry', caption: 'Country' },
            'OrderDate',
            'RequiredDate'
        ];
        $scope.dataGrid = null;
        $scope.getDataGrid = function (e) { dataGrid = e.component };
        $scope.refreshGrid = function () { dataGrid.refresh() }
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    In this example, the width of the load panel is set to 300 using the loadPanel | width option. To see the changes, refresh the grid's data source by clicking the "Refresh" button. Data for this example is obtained from www.odata.org.

    <div style="text-align:center; height:400px; max-width:630px; margin: 0 auto">
        <div style="height:350px; margin: 5px auto" data-bind="dxDataGrid: {
            dataSource: {
                store: {
                    type: 'odata',
                    jsonp: true,
                    url: 'https://services.odata.org/v2/Northwind/Northwind.svc/Orders'
                }
            },
            scrolling: { mode: 'virtual' },
            columns: columns,
            onContentReady: getDataGrid,
            loadPanel: { width: 300 }
        }"></div>
        <div data-bind="dxButton: {
            text: 'Refresh',
            onClick: refreshGrid
        }"></div>
    </div>
    
    var myViewModel = {
        columns: [
            { dataField: 'OrderID', width: 90 },
            { dataField: 'ShipName', caption: 'Name', width: 190 },
            { dataField: 'ShipCity', caption: 'City' },
            { dataField: 'ShipCountry', caption: 'Country' },
            'OrderDate',
            'RequiredDate'
        ],
        dataGrid: null,
        getDataGrid: function (e) { dataGrid = e.component },
        refreshGrid: function () { dataGrid.refresh() }
    }
    ko.applyBindings(myViewModel);
    

    In this example, the width of the load panel is set to 300 using the loadPanel | width option. To see the changes, refresh the grid's data source by clicking the "Refresh" button. Data for this example is obtained from www.odata.org.

    <div id="gridContainer" style="height: 350px; max-width: 800px; margin: 0 auto"></div>
    <div style="text-align: center; margin: 10px auto">
        <div id="buttonContainer" style="height: 40px"></div>
    </div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: {
                store: {
                    type: 'odata',
                    jsonp: true,
                    url: 'https://services.odata.org/v2/Northwind/Northwind.svc/Orders'
                }
            },
            scrolling: { mode: 'virtual' },
            columns: [
                { dataField: 'OrderID', width: 90 },
                { dataField: 'ShipName', caption: 'Name', width: 190 },
                { dataField: 'ShipCity', caption: 'City' },
                { dataField: 'ShipCountry', caption: 'Country' },
                'OrderDate',
                'RequiredDate'
            ],
            loadPanel: { width: 300 }
        });
    
        $("#buttonContainer").dxButton({
            text: 'Refresh',
            onClick: function () {
                var dataGrid = $('#gridContainer').dxDataGrid('instance');
                dataGrid.refresh();
            }
        });
    });