Skip to main content
All docs
V25.1
  • DxGrid.AutoFitColumnWidths(Boolean) Method

    OBSOLETE

    Use the AutoFitColumnWidths method without parameters instead.

    Automatically adjusts column widths to their content.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    Declaration

    [Obsolete("Use the AutoFitColumnWidths method without parameters instead.", true)]
    public void AutoFitColumnWidths(
        bool useRelativeWidth
    )

    Optional Parameters

    Name Type Default Description
    useRelativeWidth Boolean False

    Specifies whether the resulting column widths are in pixels (false) or in percentages (true).

    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.

    You can call the AutoFitColumnWidths method to adjust column widths to their content (that is, cell content of visible columns, headers, and summaries) and MinWidth values if specified.

    The method accepts a parameter that specifies in which units the algorithm calculates the resulting widths. If you do not specify this parameter or pass false explicitly, the resulting widths are in pixels. In this case, a scrollbar or empty space may appear:

    Adjust Widths in Pixels

    If you pass true as a parameter, resulting widths are calculated in percentages, proportionally to column content. In this case, columns may occupy the entire Grid’s width or a scrollbar may appear:

    Adjust Widths in Percentages

    Refer to the following topics for more information on how Blazor Grid renders its columns:

    Run Demo: Fit Column Widths

    The following example calls the AutoFitColumnWidths method to calculate initial optimal column widths:

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