Column Resizing
The Kendo UI for Angular Grid 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.
Limiting the Resizing
To restrict the resizing of the column within a certain range, set its minResizableWidth and maxResizableWidth properties.
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.
Auto-Fitting Columns to the Grid Width
To adjust the width of all Grid columns to fit the entire Grid width, use the autoFitColumnsToGrid method. This method eliminates horizontal scrollbars and empty space by distributing the available Grid width evenly across all columns.
The behavior depends on the total width of the columns:
- When the sum of all column widths is less than the available Grid width, the method distributes the remaining space evenly between all columns.
- When the sum of all column widths is greater than the available Grid width, the method shrinks the columns equally to fit the Grid width.
Run the
autoFitColumnsToGridmethod after the Grid is populated with data.
The following example demonstrates how to auto-fit columns to the Grid width when the total column width exceeds the Grid width and causes a horizontal scrollbar.
Constrained Mode
By default, when the resizable functionality of the Grid is enabled, column widths adjust relative to the entire component. If the total columns width exceeds the Grid's width, a horizontal scrollbar appears. If the total columns width is less than the Grid's width, the remaining space is displayed as white space.
To prevent this behavior and ensure that adjacent columns resize only up to their outer borders, set the resizable property to a variable of type ResizeMode with a value equal to constrained. To retain the default behavior, set the resizable property to unconstrained or to true.
Pressing
Shiftduring column resizing toggles the resize behavior: if the mode is set toconstrained, it changes tounconstrained, and if the column resizing is set tounconstrained, it switches toconstrained.
The following example demonstrates how to constrain column resizing in the Grid component.
Known Limitations
- Using the
autoFitColumnsmethod is not supported when thevirtualColumnsfunctionality is enabled.