Vue TreeList - scrolling

Configures scrolling.

Selector: DxScrolling
Type:

Scrolling

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.

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.

Selector: column-rendering-mode
Type:

DataRenderMode

Default Value: 'standard'

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.

View Demo

mode

Specifies the scrolling mode.

Type:

ScrollMode

Default Value: 'virtual'

The following scrolling modes are available in the UI component:

  • Standard
    Rows are rendered at once or by pages if paging is enabled. Scrolling appears only if all the rows cannot fit into the UI component's height.

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

NOTE

  • Specify the component's height if you use virtual scrolling.

  • Node selection in virtual scroll mode with Shift+Click does not work if the allowSelectAll property is disabled.

Note that the rowRenderingMode property value is "virtual" and cannot be changed if you set the mode property to "virtual" or "standard".

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

preloadEnabled

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

Selector: preload-enabled
Type:

Boolean

Default Value: false

In virtual scrolling mode, 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.

renderAsync

Specifies whether to render rows after a user stops scrolling or at the same time as the user scrolls the TreeList.

Selector: render-async
Type:

Boolean

Default Value: undefined

This property can have one of the following values:

scrolling.renderAsync Description
true Rows are rendered after a user stops scrolling.
In this mode, row content may take time to appear, but scrolling is smoother.
false Rows are rendered at the same time as the user scrolls the TreeList.
In this mode, row content is displayed quicker, but the component performance during scrolling may be lowered.
undefined The mode is defined automatically based on the row content.

rowRenderingMode

Specifies the rendering mode for loaded rows.

Selector: row-rendering-mode
Type:

DataRenderMode

Default Value: 'standard'

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

  • "standard"
    Renders all the loaded rows simultaneously.

  • "virtual"
    Renders only those rows that come into the viewport. Use this mode if the pageSize is large. Specify the component's height and the height of its container if you use the virtual mode.

NOTE
The rowRenderingMode property value is "virtual" and cannot be changed if you set the scrolling.mode property to "virtual" or "infinite". TreeList does not support server-side paging and virtual scrolling.

scrollByContent

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

Selector: scroll-by-content
Type:

Boolean

Default Value: true, false (non-touch devices)

scrollByThumb

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

Selector: scroll-by-thumb
Type:

Boolean

Default Value: false

showScrollbar

Specifies when to show scrollbars. Applies only if useNative is false.

Selector: show-scrollbar
Type:

ScrollbarMode

Default Value: 'onScroll', 'onHover' (desktop)

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.

useNative

Specifies whether the TreeList should use native or simulated scrolling.

Selector: use-native
Type:

Boolean

|

Mode

Default Value: 'auto'

This property can have one of the following values:

scrolling.useNative Description
"auto" Native scrolling on all platforms, except non-Mac desktops.
true Native scrolling on all platforms, without exceptions.
false Simulated scrolling on all platforms.