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',
        clickAction: 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:65px; text-align: center; margin: 5px auto">
    <div><span id="checkboxContainer"></span> Enable the Load Panel</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,
        height: 14,
        width: 14,
        valueChangeAction: function (info) {
            var dataGrid = $('#gridContainer').dxDataGrid('instance');
            dataGrid.option({
                loadPanel: { enabled: info.value }
            });
        }
    });

    $("#buttonContainer").dxButton({
        text: 'Refresh',
        clickAction: 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',
        clickAction: 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:65px; margin: 5px auto">
    <div><div id="checkboxContainer"></div> Show the Load Indicator on the Load Panel</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,
        height: 14,
        width: 14,
        valueChangeAction: function (info) {
            var dataGrid = $('#gridContainer').dxDataGrid('instance');
            dataGrid.option({
                loadPanel: { showIndicator: info.value }
            });
        }
    });

    $("#refreshButton").dxButton({
        text: 'Refresh',
        clickAction: 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:65px; margin: 5px auto">
    <div><div id="checkboxContainer"></div> Show the Pane of the Load Panel</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,
        height: 14,
        width: 14,
        valueChangeAction: function (info) {
            var dataGrid = $('#gridContainer').dxDataGrid('instance');
            dataGrid.option({
                loadPanel: { showPane: info.value }
            });
        }
    });

    $("#refreshButton").dxButton({
        text: 'Refresh',
        clickAction: 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',
        clickAction: 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',
        clickAction: function () {
            var dataGrid = $('#gridContainer').dxDataGrid('instance');
            dataGrid.refresh();
        }
    });
});