Angular TreeList - 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 property 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 UI component's width.
- <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 property to true to make all columns adjust their widths to their content.
- <dx-tree-list ...
- [columnAutoWidth]="true">
- </dx-tree-list>
- import { DxTreeListModule } from "devextreme-angular";
- // ...
- export class AppComponent {
- // ...
- }
- @NgModule({
- imports: [
- // ...
- DxTreeListModule
- ],
- // ...
- })
The UI component allows a user to resize columns in two different modes: by changing the next column's width or the UI component's width. To enable this functionality and set the mode, specify the allowColumnResizing and columnResizingMode properties, respectively. Note that you can prevent a specific column from being resized by assigning false to its allowResizing property.
- <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.