This sample demonstrates the Grid column rendering with a specified width. This sample also shows how to enable the resizing feature. Click and drag the right corner of each column header to resize it.
By default, if the total width of the columns is less than the width of the Grid, columns will automatically fill to the grid's width. The Grid's AutoFit feature prevents Grid columns from filling more than their specified width by enabling the autoFit as true.
The Grid columns can be resized by clicking and dragging at the right edge of column's header. To enable column, resize behavior, set the allowResizing
property to true. You can also prevent the resize of a particular column by setting
columns->allowResizing
to false in columns definition.
And, by double clicking at the right edge of column header, the respective column width will get auto adjusted to its fit using the autoFitColumns
method.
In this demo, the allowResizing feature is enabled by setting the allowResizing property to true and Order ID column can be resized
between the range of minWidth (100px)
and maxWidth (200px).
Also, column resizing is disabled for the Shipped Date column.
Injecting Module:
Grid features are segregated into individual feature-wise modules.
To use resize feature, inject theResize module using the services