scrolling

Configures scrolling.

Type: Object

Scrolling allows a user to browse data left outside the current viewport. The widget provides several scrolling modes detailed in the mode option description.

View Demo

See Also

mode

Specifies the scrolling mode.

Type: String
Default Value: 'standard'
Accepted Values: 'standard' | 'virtual' | 'infinite'

The following scrolling modes are available in the widget:

  • Standard
    A user scrolls a single page only. Scrolling appears only if the widget height cannot fit all rows of a page. In this mode, scrolling is auxiliary, while main navigation is performed with the pager. If paging is disabled, the widget loads all rows at once, which may decrease the widget performance. In this case, we recommend choosing another scrolling mode.

  • Virtual
    Pages are loaded when they get into the viewport and removed once they leave it. Use this mode if a user should be able to scroll data jumping from one page to another.

  • Infinite
    Each next page is loaded once the scrollbar reaches the end of its scale. Use this mode if a user should scroll data gradually, from the first to the last page.

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

Infinite Scrolling Demo Virtual Scrolling Demo

See Also

preloadEnabled

Specifies whether the widget should load pages adjacent to the current page. Applies only if scrolling.mode is "virtual".

Type: Boolean
Default Value: false

In virtual scrolling mode, a page is loaded when it gets into the viewport. If you set this option to true, adjacent pages will be loaded as well. Note that although this setting makes scrolling smoother, it 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 a user can scroll the content with a swipe gesture. Applies only if useNative is false.

Type: Boolean
Default Value: true

scrollByThumb

Specifies whether a user can scroll the content with the scrollbar. Applies only if useNative is false.

Type: Boolean
Default Value: false

showScrollbar

Specifies when to show the scrollbar. Applies only if useNative is false.

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

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

useNative

Specifies whether the widget should use native or simulated scrolling.

Type: String|Boolean
Default Value: 'auto'

By default, the widget employs native scrolling on most platforms, except non-Mac desktops and devices based on Android older than version 4. To employ native scrolling on all platforms without exception, assign true to this option. If you assign false, the widget simulates scrolling on all platforms.