Column Sizing

If you do not explicitly specify certain columns' width, the TreeList tries to distribute the available space equally among columns at startup. As a result, cell values may appear truncated. To guarantee a minimum width for a column, use the minWidth option. Note that all mentioned settings may cause horizontal scrolling if columns cannot fit into the widget's width.

JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        columnMinWidth: 100,
        columns: [{
            dataField: "Title",
            width: 200
        }, {
            dataField: "Address",
            minWidth: 150
        }]
    });
 });

Set the columnAutoWidth option to true to make all columns adjust their widths to their content.

JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        columnAutoWidth: true
    });
 });

The widget allows a user to resize columns in two different modes: by changing the width of the next column or the width of the widget. 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.

JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        allowColumnResizing: true,
        columnResizingMode: 'widget', // or 'nextColumn'
        columns: [{
            dataField: "Title",
            allowResizing: false
        }, // ...
        ]
    });
 });

View Demo

See Also