scrolling

A configuration object specifying scrolling options.

Type: Object

The DataGrid 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:
AngularJS
Knockout
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.


                                    

                                    

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.


                                    

                                    

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'

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

When configuring the widget using ASP.NET MVC Wrappers, specify this option using the GridScrollingMode enum. This enum accepts the following values: Standard, Virtual and Infinite.

View Infinite Scrolling Demo View Virtual Scrolling Demo

Show Example:
AngularJS
Knockout
jQuery

In this example, you can spot the difference between three modes of scrolling provided by the DataGrid 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.


                                    

                                    

In this example, you can spot the difference between three modes of scrolling provided by the DataGrid 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.


                                    

                                    

In this example, you can spot the difference between three modes of scrolling provided by the DataGrid 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 DataGrid widget scrolls records smoothly. However, enabling this feature may cause lags on devices with low performance.

Show Example:
AngularJS
Knockout
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.


                                    

                                    

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.


                                    

                                    

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.


                                    

                                    

scrollByContent

Specifies whether or not the scrolling by content is enabled.

Type: Boolean
Default Value: true

This feature is available only when native scrolling is disabled.

scrollByThumb

Specifies whether or not the scrollbar thumb scrolling enabled.

Type: Boolean
Default Value: false

The scrollbar thumb is available only when native scrolling is disabled.

showScrollbar

Specifies the scrollbar display policy.

Type: String
Default Value: 'onScroll'
Accepted Values: 'onScroll' | 'onHover' | 'always' | 'never'

When configuring the widget using ASP.NET MVC Wrappers, specify this option using the ShowScrollbarMode enum. This enum accepts the following values: OnScroll, OnHover, Always and Never.

useNative

Specifies whether or not the widget uses native scrolling.

Type: String|Boolean
Default Value: 'auto'