DxTreeList.AutoFitColumnWidths() Method

Adjusts column width to content.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public void AutoFitColumnWidths()

Remarks

DxTreeList uses the fixed table layout algorithm to render HTML, and column widths never depend on the column content - the component does not adjust column width based on column content automatically. Refer to the following topics for more information on how Blazor TreeList renders its columns:

• Column Layout Specifics in Blazor TreeList
• Columns in Blazor TreeList

If you allow column resize in the UI, users can double-click a column’s right border to apply the optimal width (best fit) based on the column’s content (that is, cell content of visible columns, headers, and summaries).

You can call the AutoFitColumnWidths() method to adjust column widths to their content in code.

Run Demo: Auto Fit

Width Calculation Specifics

The best fit algorithm uses the same units as the column’s Width property value:

• For columns with widths specified in pixels, the final width is set in pixels. The column’s width fits its content.
• For columns with widths marked either in percentages or not set at all, the final width is in percentages. Columns may shrink or grow based on available space. The resulting column width may not fit its content and is not less than the MinWidth property value.
• If you resize columns manually before the method call, the algorithm reinitializes all column widths with pixel values and sets the resulting widths in pixels.

Depending on the calculated values, the following outcomes are possible:

• Columns occupy the entire width of the component. Example: all or several widths are in percentages.
• A scroll bar appears. Example: all widths are in pixels and the content does not fit within the width of the component.
• Empty space remains. Example: all widths are in pixels and there is not enough content to fill the width of the component.

Example

The following example calls the AutoFitColumnWidths method to calculate initial optimal column widths. The algorithm sets Task and Employee Name column widths in pixels, and in percentages for the remaining columns:

<DxTreeList @ref="TreeList" Data="Data" KeyFieldName="Id" ParentKeyFieldName="ParentId">
    <Columns>
        <DxTreeListDataColumn FieldName="Name" Caption="Task" Width="100px" />
        <DxTreeListDataColumn FieldName="EmployeeName" Width="100px"/>
        <DxTreeListDataColumn FieldName="StartDate" />
        <DxTreeListDataColumn FieldName="DueDate" />
    </Columns>
</DxTreeList>

@code {
    ITreeList TreeList { get; set; }
    List<EmployeeTask> Data { get; set; }

    protected override void OnInitialized() {
        Data = EmployeeTaskService.GenerateData();
    }
    protected override void OnAfterRender(bool firstRender) {
        if(firstRender) {
            TreeList.AutoFitColumnWidths();
        }
    }
}

Implements

AutoFitColumnWidths()

AutoFitColumnWidths()