Scroll Modes Basics

The TreeList provides options for rendering its content in a scrollable or non-scrollable mode by configuring its scrollable property.

Scrollable Mode

When scrolling is enabled, the content of the TreeList is rendered as tablesone for the header area, another one for the scrollable data area, and a third one for the footer area. This behavior ensures that the header and footer areas of the TreeList are always visible while the user scrolls vertically.

Getting Started

The scrollable mode of the TreeList is enabled by default. You can configure the scrollable behavior through the scrollable option.

By default, the TreeList is as high as its content and as wide as the available space. To configure the height of the TreeList, either set its height input or use the style HTML property. To configure the width of the TreeList, use the style HTML property. If the height or width of the TreeList content exceeds the height or width of the TreeList itself, the TreeList renders a vertical or horizontal scrollbar respectively.

To enable horizontal scrolling, set the width of all columns.

Example
View Source
Edit In Stackblitz  
Change Theme:

Conditional Scrolling

By configuring the style.maxHeight property, you can set the TreeList in scrollable mode only when its rendered content exceeds certain height limits. If the content does not exceed the set maximum height, the height of the TreeList will be the same as the height of its content.

To utilize this approach in IE11, nest the TreeList inside a div wrapper with the style="display: flex; flex-direction: column;" CSS and add overflow: hidden to the component.

Example
View Source
Edit In Stackblitz  
Change Theme:

Non-Scrollable Mode

When the non-scrollable mode is enabled, the TreeList renders its data as a single table and the scrollbar is not displayed. To define a non-scrollable TreeList, set scrollable to none.

In this article

Not finding the help you need?