The following rendering modes are available in the UI component:
Renders all columns at once.
Renders only those columns that get into the viewport.
The following scrolling modes are available in the UI component:
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.
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. Node selection in virtual scroll mode with Shift+Click does not work in the following cases:
- Deferred selection is enabled.
- Rows grouping is enabled.
- 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 "infinite".
Regardless of the scrolling mode, you can use the paging.pageSize property to specify the number of rows on a page.
Specifies whether the UI component should load adjacent pages. Applies only if scrolling.mode is "virtual".
Specifies whether to render rows after a user stops scrolling or at the same time as the user scrolls the TreeList.
This property can have one of the following values:
Rows are rendered after a user stops scrolling.
In this mode, row content may take time to appear, but scrolling is smoother.
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.|
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:
Renders all the loaded rows at once.
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 gray boxes. If you do not want them to appear, disable the scrolling.renderAsync property, but this can impact performance.
Note that the rowRenderingMode property value is "virtual" and cannot be changed if you set the scrolling.mode property to "virtual" or "infinite".
Specifies whether a user can scroll the content with a swipe gesture. Applies only if useNative is false.
Specifies whether a user can scroll the content with the scrollbar. Applies only if useNative is false.
Specifies when to show scrollbars. Applies only if useNative is false.
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.