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.


                                    

                                    

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.


                                    

                                    

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.


                                    

                                    

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.


                                    

                                    

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.


                                    

                                    

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.


                                    

                                    

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.


                                    

                                    

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.


                                    

                                    

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.


                                    

                                    

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.


                                    

                                    

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.


                                    

                                    

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.


                                    

                                    

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.


                                    

                                    

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.


                                    

                                    

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.


                                    

                                    

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.


                                    

                                    

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.


                                    

                                    

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.


                                    

                                    

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.


                                    

                                    

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.


                                    

                                    

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.