Resizing the Angular Grid
The Kendo UI for Angular Grid is a powerful tool for displaying data. By default, the component has a fixed size, but you can enable resizing to give users greater control over the appearance of the data and how they interact with it.
Getting Started
To make the Grid resizable, set the gridResizable property of the Grid to true.
The following example demonstrates the resizable functionality of the Grid.
Limiting the Resizing
To restrict the resizing of the Grid within a certain range, use the GridResizableSettings interface. You can define the minimum and maximum size restrictions for the resizable Grid by setting the following properties:
maxHeight—Specifies the maximum height of the resizable Grid. Accepts values of the CSSmax-heightproperty.maxWidth—Specifies the maximum width of the resizable Grid. Accepts values of the CSSmax-widthproperty.minHeight—Specifies the minimum height of the resizable Grid. Accepts values of the CSSmin-heightproperty.minWidth—Specifies the minimum width of the resizable Grid. Accepts values of the CSSmin-widthproperty.
For all of the properties, the accepted value types are:
- Length values (
px,em,rem,vh,vw)—for instance,500px,50vh, and10rem. - Percentages—values like
50%and100%represent a percentage relative to the parent container's size. - Keywords—
auto,inherit,initial, andunset.
The following example demonstrates how to restrict the resizing of the Grid within a certain range.