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.