loadPanel

Specifies options configuring the load panel.

Type:

Object

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

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

Show Example:
AngularJS
Knockout
jQuery

Use the radio group below the pivot grid to change the loading indicator of the load panel. To invoke the load panel after making the change, click the "Reload Data" button. The loading indicators are created on the loading.io website.


                                    

                                    

Use the radio group below the pivot grid to change the loading indicator of the load panel. To invoke the load panel after making the change, click the "Reload Data" button. The loading indicators are created on the loading.io website.


                                    

                                    

Use the radio group below the pivot grid to change the loading indicator of the load panel. To invoke the load panel after making the change, click the "Reload Data" button. The loading indicators are created on the loading.io website.


                                    

                                    

enabled

Enables or disables the load panel.

Type:

Boolean

Default Value: true

height

Specifies the height of the load panel.

Type:

Number

Default Value: 70

indicatorSrc

Specifies the URL pointing to an image that will be used as a load indicator.

Type:

String

Default Value: ''

Show Example:
AngularJS
Knockout
jQuery

Use the radio group below the pivot grid to change the loading indicator of the load panel. To invoke the load panel after making the change, click the "Reload Data" button. The loading indicators are created on the loading.io website.


                                    

                                    

Use the radio group below the pivot grid to change the loading indicator of the load panel. To invoke the load panel after making the change, click the "Reload Data" button. The loading indicators are created on the loading.io website.


                                    

                                    

Use the radio group below the pivot grid to change the loading indicator of the load panel. To invoke the load panel after making the change, click the "Reload Data" button. The loading indicators are created on the loading.io website.


                                    

                                    

showIndicator

Specifies whether or not to show a load indicator.

Type:

Boolean

Default Value: true

Show Example:
AngularJS
Knockout
jQuery

Use the switch below the pivot grid to change the visibility of the loading indicator. To invoke the load panel after making the change, click the "Reload Data" button.


                                    

                                    

Use the switch below the pivot grid to change the visibility of the loading indicator. To invoke the load panel after making the change, click the "Reload Data" button.


                                    

                                    

Use the switch below the pivot grid to change the visibility of the loading indicator. To invoke the load panel after making the change, click the "Reload Data" button.


                                    

                                    

showPane

Specifies whether or not to show load panel background.

Type:

Boolean

Default Value: true

Show Example:
AngularJS
Knockout
jQuery

Use the switch below the pivot grid to make the pane of the load panel visible/invisible. To invoke the load panel after making the change, click the "Reload Data" button.


                                    

                                    

Use the switch below the pivot grid to make the pane of the load panel visible/invisible. To invoke the load panel after making the change, click the "Reload Data" button.


                                    

                                    

Use the switch below the pivot grid to make the pane of the load panel visible/invisible. To invoke the load panel after making the change, click the "Reload Data" button.


                                    

                                    

text

Specifies the text to display inside a load panel.

Type:

String

Default Value: 'Loading...'

Show Example:
AngularJS
Knockout
jQuery

In this demo, you can change the text of the load panel at runtime. Type any text in the text box below the pivot grid. Then, click the "Reload Data" button to invoke the load panel. It will display the specified text.


                                    

                                    

In this demo, you can change the text of the load panel at runtime. Type any text in the text box below the pivot grid. Then, click the "Reload Data" button to invoke the load panel. It will display the specified text.


                                    

                                    

In this demo, you can change the text of the load panel at runtime. Type any text in the text box below the pivot grid. Then, click the "Reload Data" button to invoke the load panel. It will display the specified text.


                                    

                                    

width

Specifies the width of the load panel.

Type:

Number

Default Value: 200