DevExtreme React - Column Sizing
If you do not explicitly specify certain columns' width, the TreeList distributes the available space equally among columns at startup. As a result, cell values may appear truncated. Use the columnMinWidth option to specify a minimum width for all columns and the minWidth for an individual column. Note that all these settings may cause horizontal scrolling if columns cannot fit into the widget's width.
jQuery
$(function() { $("#treeListContainer").dxTreeList({ // ... columnMinWidth: 100, columns: [{ dataField: "Title", width: 200 }, { dataField: "Address", minWidth: 150 }] }); });
Angular
<dx-tree-list ... [columnMinWidth]="100"> <dxi-column dataField="Title" [width]="200"></dxi-column> <dxi-column dataField="Address" [minWidth]="150"></dxi-column> </dx-tree-list>
import { DxTreeListModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxTreeListModule ], // ... })
Set the columnAutoWidth option to true to make all columns adjust their widths to their content.
jQuery
$(function() { $("#treeListContainer").dxTreeList({ // ... columnAutoWidth: true }); });
Angular
<dx-tree-list ... [columnAutoWidth]="true"> </dx-tree-list>
import { DxTreeListModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxTreeListModule ], // ... })
The widget allows a user to resize columns in two different modes: by changing the next column's width or the widget's width. To enable this functionality and set the mode, specify the allowColumnResizing and columnResizingMode options, respectively. Note that you can prevent a specific column from being resized by assigning false to its allowResizing option.
jQuery
$(function() { $("#treeListContainer").dxTreeList({ // ... allowColumnResizing: true, columnResizingMode: 'widget', // or 'nextColumn' columns: [{ dataField: "Title", allowResizing: false }, // ... ] }); });
Angular
<dx-tree-list ... [allowColumnResizing]="true" columnResizingMode="widget"> <!-- or 'nextColumn' --> <dxi-column dataField="Title" [allowResizing]="false"></dxi-column> </dx-tree-list>
import { DxTreeListModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxTreeListModule ], // ... })
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.