Keeping a Flexible Grid Column Above a Minimum Width
Environment
| Product Version | Current |
| Product | Progress® Kendo UI for Vue Grid |
Description
I have a flexible Grid column, such as Adjustment Reason, that should use the space left by other columns but must not shrink below a minimum width. I also want its width to update when the Grid's container changes size or other columns are hidden.
This knowledge base article also answers the following questions:
- How can I make a Grid column responsive while enforcing a minimum width?
- How can I prevent an unbounded Grid column from collapsing?
- How can I recalculate column widths when a column is hidden?
Solution
Calculate an explicit width for the flexible column from the Grid container's current width and the widths of the other visible columns. Clamp the result to the required minimum. A ResizeObserver detects changes to the container, including layout changes that do not originate from a browser-window resize. Recompute the visible fixed-column list when the application hides or shows columns.
- Define the fixed columns and their widths, and set a minimum width for the flexible column.
- Observe the Grid's container with
ResizeObserverand store its current width. - Set the flexible column's width to the larger of its minimum and the space remaining after the visible fixed columns are accounted for.
- If the combined column widths exceed the container width, keep the minimum widths and let the Grid scroll horizontally.
The demo includes a width control to simulate container resizing and a checkbox that hides or shows a fixed-width column. When the container is wider than the combined fixed widths and the minimum, the Adjustment Reason column takes the remaining space. When it is narrower, the flexible column stays at its minimum and the Grid overflows horizontally.
The Grid column
minResizableWidthproperty can additionally prevent users from dragging a resizable column below a limit. It only applies to manual resizing; the calculatedwidthenforces the minimum during responsive layout changes.