New to Kendo UI for AngularStart a free 30-day trial

Column Resizing

Updated on May 27, 2026

The Angular TreeList enables you to resize its columns by dragging the edges (resize handles) of the header cells.

Getting Started

To enable column resizing, set the resizable property to true.

  • By default, the column-resizing feature is disabled.
  • If the user resizes the TreeList columns so that the total width of the columns becomes less than the width of the TreeList, the remaining table is filled with whitespace.

The following example demonstrates how to resize columns in the TreeList.

Change Theme
Theme
Loading ...

Limiting the Resizing

To restrict the minimum width of a column during resizing, set its minResizableWidth property.

The following example demonstrates how to restrict the minimum width of the "Name" column.

Change Theme
Theme
Loading ...

Auto-Fitting the Content

You can set the initial width of all TreeList columns so that it fits the width of their widest header or cell content by using the autoSize TreeList option. You can also apply this behavior on a per-column basis by using the autoSize column option.

To auto-resize the columns of the TreeList at runtime, use the autoFitColumns method.

The following example demonstrates how to automatically fit the content of the TreeList columns.

Change Theme
Theme
Loading ...