DxDataGridColumnBase<T>.FixedStyle Property

Specifies whether the column is moved or anchored to the grid’s edge when users scroll the grid horizontally.

Namespace: DevExpress.Blazor.Base

Assembly: DevExpress.Blazor.v21.2.dll

Declaration

[Parameter]
[DefaultValue(DataGridFixedStyle.None)]
public DataGridFixedStyle FixedStyle { get; set; }

Property Value

Type Default Description
DataGridFixedStyle

None

A DataGridFixedStyle enumeration value.

Available values:

Name Description
Left

The column is anchored to the grid’s left edge and always remains visible when users scroll the grid horizontally.

None

The column is moved when users scroll the grid horizontally.

Right

The column is anchored to the grid’s right edge and always remains visible when users scroll the grid horizontally.

Remarks

You can freeze individual Data Grid columns so that they always remain visible on screen while users scroll the grid horizontally. To do this, set a column’s FixedStyle property to DataGridFixedStyle.Left or DataGridFixedStyle.Right to anchor the column to the grid’s left or right edge. Once you do so, the Data Grid sets the HorizontalScrollBarMode property to Auto and displays the horizontal scroll bar when the total width of grid columns exceeds the grid’s width.

Set the Width property for all Data Grid columns. Columns with unspecified widths might be hidden if the Data Grid does not have sufficient space to display them.

Refer to the following topic for more information: Table Layout Specifics.

<DxDataGrid Data="@DataSource"
            HorizontalScrollBarMode="ScrollBarMode.Visible">
    <DxDataGridColumn Field="@nameof(Order.ShipName)" Width="250px" FixedStyle="DataGridFixedStyle.Left" />
    <DxDataGridColumn Field="@nameof(Order.ShipAddress)" Width="350px" />
    <DxDataGridColumn Field="@nameof(Order.ShipCity)" Width="200px" />
    <DxDataGridColumn Field="@nameof(Order.ShipPostalCode)" Width="150px" />
    <DxDataGridColumn Field="@nameof(Order.ShipCountry)" Width="200px" />
    <DxDataGridColumn Field="@nameof(Order.Freight)" Width="100px" />
    <DxDataGridDateEditColumn Field="@nameof(Order.OrderDate)" DisplayFormat="d" Width="120px" />
    <DxDataGridDateEditColumn Field="@nameof(Order.ShippedDate)" DisplayFormat="d" Width="120px" FixedStyle="DataGridFixedStyle.Right" />
</DxDataGrid>

Data Grid Fixed Columns

You can anchor an unlimited number of columns to any grid edge. The display order of fixed columns corresponds to the order of these columns in the grid’s markup or depends on the VisibleIndex property if it is specified explicitly.

Run Demo: Data Grid - Fixed Columns

See Also