DxGrid.AutoFitColumnWidths() Method

Adjusts column widths to their content.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.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

You can call the AutoFitColumnWidths() method to adjust column widths to their content (that is, cell content of visible columns, headers, and summaries). The auto 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; for columns with widths in percentages, the final width is in percentages. If these properties are not specified, the algorithm sets widths in relative units. If a column should narrow after the method call, the resulting column width is not less than the MinWidth property value.

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();
         }
    }
}

Run Demo: Fit Column Widths

Implements

AutoFitColumnWidths()