Scrolling
By default, scrolling in the TreeList is enabled.
To achieve a maximum level of accessibility with assistive technologies for the TreeList, disable its scrolling feature.
The enabled scrolling functionality does not guarantee the rendering of scrollbars because scrolling requires you to define some of the TreeList dimensions:
- To achieve vertical scrolling, set a height to the TreeList. If the height is not defined, the TreeList will have to expand vertically to show all its rows.
- To achieve horizontal scrolling, you have to explicitly define the widths of all columns in pixels and their sum must exceed the width of the TreeList.
You can independently control vertical and horizontal scrolling.
When scrolling is enabled, the TreeList renders two tables—one for the header area and one for the scrollable data area. This ensures that the header area of the TreeList is always visible during vertical scrolling. Take the two tables into account when you need to manually make JavaScript or CSS updates to the Grid tables.
The implementation and specifics of the scrolling functionality in the TreeList and the Gird are identical. Therefore, for more information on the scrolling functionality of the TreeList, refer to the following articles
- Controlling the appearance of the Grid
- Setting 100% Height and Auto-Resizing the Grid
- Removing the Vertical Scrollbar in the Grid
- Setting the Columns and Column Widths in the Grid
- Implementing Locked Columns in the Grid
The following example demonstrates how to enable the scrolling functionality in the TreeList.
<div class="k-widget k-grid k-treelist">
<div class="k-grid-header">
<div class="k-grid-header-wrap">
<table>...</table>
</div>
</div>
<div class="k-grid-content">
<table>...</table>
</div>
</div>