New to Kendo UI for Angular? Start a free 30-day trial

Column Resizing

The Kendo UI Grid for Angular 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 of the Kendo UI Grid for Angular to true.

  • By default, the column-resizing feature is disabled.
  • If the user resizes the Grid columns so that the total width of the columns becomes less than the width of the Grid, the remaining table is filled with whitespace.
Example
View Source
Change Theme:

Limiting the Resizing

To restrict the resizing of the column within a certain range, set its minResizableWidth and maxResizableWidth properties.

Example
View Source
Change Theme:

Auto-Fitting the Content

You can set the initial width of all Grid columns so that it fits the width of their widest header or cell content by using the autoSize Grid 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 Grid at runtime, use the autoFitColumns method.

The following example demonstrates how to automatically fit the content of all columns when the Grid is re-rendered.

Example
View Source
Change Theme:

Known Limitations