scrolling

A configuration object specifying scrolling options.

Type:

Object

The dxDataGrid widget supplies a user with an opportunity to scroll grid records. Scrolling can be performed within one page when used in conjunction with the pager or throughout the whole data source. In the latter case, data is still loaded by pages but a user moves through them continuously without noticing it. To specify required scrolling behavior, use the mode property of the scrolling configuration object.

View Demo

Show Example:
jQuery

In this example, the infinite scrolling mode is specified for a grid using the scrolling | mode option. Data for this example is obtained from www.odata.org.


                                    

                                    

mode

Specifies the scrolling mode.

Type:

String

Default Value: "standard"
Accepted Values: "standard" | "virtual" | "infinite"

dxDataGrid provides three modes of scrolling. For a comprehensive overview, refer to the Vertical Scrolling article.

View Demo

Show Example:
jQuery

In this example, you can spot the difference between three modes of scrolling provided by the dxDataGrid widget. Choose a required mode using the select box under the grid, and then scroll grid records. Note that when the standard mode is chosen, the grid is supplied with a pager automatically. Data for this example is obtained from www.odata.org.


                                    

                                    

preloadEnabled

Specifies whether or not a grid must preload pages adjacent to the current page when using virtual scrolling.

Type:

Boolean

Default Value: false

In the virtual scrolling mode, the grid loads a page when it gets into the grid's field of vision. Additionally, it can preload the pages adjacent to the currently displayed page. To enable this feature, assign true to the preloadEnabled option. With preloading enabled, the dxDataGrid widget scrolls records smoothly. However, enabling this feature may cause lags on devices with low performance.

Show Example:
jQuery

In this example, you can change the value of the scrolling | preloadEnabled option at runtime using the check box under the grid. Scroll grid records to spot the difference between the enabled and disabled page preloading. Data for this example is obtained from www.odata.org.