DxGrid.AutoFitColumnWidths() Method

Adjusts column widths to their content.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public void AutoFitColumnWidths()

Remarks

DxGrid 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 Grid renders its columns:

• Layout Specifics in Blazor Grid
• Columns in Blazor Grid

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).

In code, you can call the AutoFitColumnWidths() method to adjust column widths to their content.

Run Demo: Fit Column Widths

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 set in percentages or not set, 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 Product Name, Category Name, Description, and Unit Price column widths in percentages, and in pixels for the remaining columns:

<DxGrid Data="Products"
        @ref="MyGrid"
        EditMode="GridEditMode.EditRow"
        TextWrapEnabled="false">
    <Columns>
        <DxGridCommandColumn MinWidth="135" />
        <DxGridDataColumn FieldName="ProductName" Width="20%" />
        <DxGridDataColumn FieldName="CategoryId" Caption="Category Name">
            <EditSettings>
                <DxComboBoxSettings Data="Categories" ValueFieldName="CategoryId" TextFieldName="CategoryName" />
            </EditSettings>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="Category.Description" Caption="Description" />
        <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c">
            <EditSettings>
                <DxSpinEditSettings MinValue="0M" Mask="n3" />
            </EditSettings>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="UnitsInStock" Width="50px" />
        <DxGridDataColumn FieldName="QuantityPerUnit" Width="50px" />
        <DxGridDataColumn FieldName="Discontinued" Width="50px" />
    </Columns>
</DxGrid>

@code {
    List<Product> Products { get; set; }
    IGrid MyGrid { get; set; }

    protected override void OnAfterRender(bool firstRender) {
         if(firstRender) {
             MyGrid.AutoFitColumnWidths();
         }
    }
}

Implements

AutoFitColumnWidths()