Example of Resize in Javascript Tree Grid Control


This sample demonstrates the Tree Grid column resizing feature. Click and drag at the right corner of each column header to resize the column.

More Details...


The Tree Grid columns can be resized by clicking and dragging at the right edge of columns header. Set allowResizing property as true, to enable column resizing behavior in Tree Grid. You can also prevent the resize of the particular column by setting columns->allowResizing as false in columns definition. In this demo, allowResizing feature have enabled through by setting the allowResizing property as true and Task Name column can be resized between the range of minWidth (120px) and maxWidth (300px). Also, column resizing has been disabled in the Duration column. Injecting Module: Tree Grid features are segregated into individual feature-wise modules. To use resize feature, we need to inject Resize module using the TreeGrid.Inject(Resize) section. More information about Column Resizing can be found in this documentation section.