All docs
V20.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
Box
Row
Map
Vue

scrolling

Configures scrolling.

Type:

Object

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

View Demo

See Also

columnRenderingMode

Specifies the rendering mode for columns. Applies when columns are left outside the viewport. Requires the columnWidth, columnAutoWidth, or width (for all columns) property specified.

Type:

String

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

The following rendering modes are available in the UI component:

  • "standard"
    Renders all columns at once.

  • "virtual"
    Renders only those columns that get into the viewport.

Use the GridColumnRenderingMode enum to specify this property when the UI component is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core 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:

  • Standard
    A user scrolls a single page only. Scrolling is available only if all the page's rows do not fit into the UI component's height. In this mode, the pager performs the main navigation and scrolling is auxiliary. If paging is disabled, the UI component loads all rows simultaneously which can reduce the UI component's performance. In this case, we recommend that you use another scrolling mode.

  • Infinite
    Each next page is loaded once the scrollbar reaches the end of its scale. In this mode, users scroll data gradually from the first to the last page.

    NOTE
    Set the grouping.allowCollapsing property to false when using infinite scrolling in conjunction with grouping.
  • Virtual
    Rows are loaded when they get into the viewport and removed once they leave it. If the rows take time to be loaded and rendered, they display gray boxes. Rendering optimization can reduce rendering time and remove gray boxes. In this mode, users can move to any page instantly.

Regardless of the scrolling mode, you can use the paging.pageSize property to specify the number of rows on a page.

Use the GridScrollingMode enum to specify this property when the UI component is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Standard, Virtual, and Infinite.

Infinite Scrolling Demo Virtual Scrolling Demo

See Also

preloadEnabled

Specifies whether the UI component should load adjacent pages. Applies only if scrolling.mode is "virtual" or "infinite".

Type:

Boolean

Default Value: false

In virtual and infinite scrolling modes, pages are loaded on demand. If you set this property to true, the adjacent pages are loaded in advance for smoother scrolling. This property can reduce the performance on older devices.

rowRenderingMode

Specifies the rendering mode for loaded rows.

Type:

String

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

Unlike the mode property, which defines when to load data for rows, this property 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. Rows that are being currently rendered can be shown as grey boxes.

Use the GridRowRenderingMode enum to specify this property when the UI component is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Standard and Virtual.

View Demo

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', 'onHover' (desktop)
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 UI component's height. Horizontal scrolling is available when all the columns do not fit in the UI component's width, which can happen when columns have fixed widths or the columnAutoWidth property is set to true.

Use the ShowScrollbarMode enum to specify this property when the UI component is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: OnScroll, OnHover, Always, and Never.

useNative

Specifies whether the UI component should use native or simulated scrolling.

Type:

Boolean

|

String

Default Value: 'auto'
Accepted Values: 'auto'

By default, the UI component 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 property. If you assign false, the UI component simulates scrolling on all platforms.