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. While data is not yet ready, 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.

    Show Example:
    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 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: 'http://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:
    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 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: 'http://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: 70

    Show Example:
    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 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: 'http://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:
    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 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: 'http://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:
    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 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: 'http://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:
    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 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: 'http://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:
    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 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: 'http://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();
            }
        });
    });