Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxGridColumn.Width Property

Specifies the column’s width in CSS units.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
[DefaultValue(null)]
[Parameter]
public string Width { get; set; }

#Property Value

Type Default Description
String null

The column’s width.

#Remarks

You can specify the Width property in any relative or absolute units that your browser supports.

@inject WeatherForecastService ForecastService

<DxGrid Data="@Data">
    <Columns>
        <DxGridDataColumn FieldName="Date" DisplayFormat="D" />
        <DxGridDataColumn FieldName="TemperatureC" Caption="@("Temp. (\x2103)")" Width="120px" />
        <DxGridDataColumn FieldName="TemperatureF" Caption="@("Temp. (\x2109)")" Width="120px" />
        <DxGridDataColumn FieldName="Forecast" />
        <DxGridDataColumn FieldName="CloudCover" />
    </Columns>
</DxGrid>

@code {
    object Data { get; set; }

    protected override void OnInitialized() {
        Data = ForecastService.GetForecast();
    }
}

Blazor Grid Data Binding

If you do not specify a column’s Width property explicitly, its value is automatically calculated based on the Grid’s total width, other column widths, borders, and cell spacing. For more information on how this algorithm works in different scenarios, refer to the following topic: Layout Specifics in Blazor Grid.

If there is not enough space to display all Grid columns, columns with unspecified widths can be collapsed. To prevent a column from collapsing, set its MinWidth property to a non-zero value.

Run Demo: Grid - Data Binding

#Implements

See Also