JavaScript/jQuery 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.
- $(function() {
- $("#treeListContainer").dxTreeList({
- // ...
- columnMinWidth: 100,
- columns: [{
- dataField: "Title",
- width: 200
- }, {
- dataField: "Address",
- minWidth: 150
- }]
- });
- });
Set the columnAutoWidth property to true to make all columns adjust their widths to their content.
- $(function() {
- $("#treeListContainer").dxTreeList({
- // ...
- columnAutoWidth: true
- });
- });
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.
- $(function() {
- $("#treeListContainer").dxTreeList({
- // ...
- allowColumnResizing: true,
- columnResizingMode: 'widget', // or 'nextColumn'
- columns: [{
- dataField: "Title",
- allowResizing: false
- }, // ...
- ]
- });
- });
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.