loadPanel

Configures the load panel.

Type: Object

The load panel is displayed while the widget loads data. It consists of a loading indicator and text, both placed on a pane.

DevExtreme HTML5 JavaScript jQuery Angular Knockout Widget DataGrid TreeList LoadPanel

Since the load panel is, in fact, the DevExtreme LoadPanel widget, the loadPanel object can contain any options of this widget along with options described here.

See Also
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: String|Boolean
Default Value: 'auto'
Accepted Values: 'auto' | true | false

By default, the load panel is shown for remote data sources only. To show it regardless of the data source type, assign true to this option. To completely disable the load panel, set this option to false.

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 to show the loading indicator.

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 to show the pane of the load panel.

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 on 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.