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

columnRenderingMode

Specifies the rendering mode for columns. Applies when columns are left outside the viewport.

Type:

String

Default Value: 'standard'
Accepted Values: 'standard' | 'virtual'

The following rendering modes are available in the widget:

  • "standard"
    Renders all columns at once.

  • "virtual"
    Renders only those columns that get into the viewport.
    This mode is ignored if banded columns are present in the widget.

Use the GridColumnRenderingMode enum to specify this option when the widget is used as an ASP.NET MVC Control. This enum accepts the following values: Standard and Virtual.

mode

Specifies the scrolling mode.

Type:

String

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

The following scrolling modes are available in the widget:

  • Standard
    A user scrolls a single page only. Scrolling appears only if all the page's rows do not fit into the widget's height. In this mode, the pager performs the main navigation and scrolling is auxiliary. If paging is disabled, the widget loads all rows at once, which may decrease the widget's performance. In this case, we recommend choosing another scrolling mode.

  • Virtual
    This mode is an alternative to paging where 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 by pages.

  • Infinite
    This mode is an alternative to paging where 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.

    NOTE
    Set the grouping.allowCollapsing option to false when using infinite scrolling in conjunction with grouping.

Use the GridScrollingMode enum to specify this option when the widget is used as an ASP.NET MVC Control. 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.

rowRenderingMode

Specifies the rendering mode for loaded rows.

Type:

String

Default Value: 'standard'
Accepted Values: 'standard' | 'virtual'

Unlike the mode option, which defines when to load data for rows, this option defines when to render them. The following rendering modes are available:

  • "standard"
    Renders all the loaded rows at once.

  • "virtual"
    Renders only those rows that get into the viewport. Use this mode if the pageSize is large.

Use the GridRowRenderingMode enum to specify this option when the widget is used as an ASP.NET MVC Control. This enum accepts the following values: Standard and Virtual.

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 scrollbars. Applies only if useNative is false.

Type:

String

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

The scrollbars help to scroll the content vertically and horizontally. Vertical scrolling is available when all the rows do not fit in the widget's height. Horizontal scrolling is available when all the columns do not fit in the widget's width, which can happen when columns have fixed widths or the columnAutoWidth option is set to true.

Use the ShowScrollbarMode enum to specify this option when the widget is used as an ASP.NET MVC Control. This enum accepts the following values: OnScroll, OnHover, Always, and Never.

useNative

Specifies whether the widget should use native or simulated scrolling.

Type:

Boolean

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.