DxDataGrid<T>.HorizontalScrollBarMode Property

Specifies the horizontal scroll bar’s display mode.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v22.1.dll

Declaration

[DefaultValue(ScrollBarMode.Hidden)]
[Parameter]
public ScrollBarMode HorizontalScrollBarMode { get; set; }

Property Value

Type	Default	Description
ScrollBarMode	Hidden	A ScrollBarMode enumeration value.

Available values:

Name	Description
Auto	The component automatically shows a scrollbar when the content size exceeds the component size itself.
Hidden	The scrollbar is hidden.
Visible	The scrollbar is visible.

Remarks

Important

The Data Grid was moved to maintenance support mode. No new features/capabilities will be added to this component. We recommend that you migrate to the Grid component.

Follow the steps below to show the horizontal scroll bar:

1. Set the HorizontalScrollBarMode property to Auto or Visible.

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

Note that if you specify the Width property of all columns in percentages, the HorizontalScrollBarMode property is not in effect.

<DxDataGrid Data="@DataSource"
                HorizontalScrollBarMode="ScrollBarMode.Visible"
                PagerNavigationMode="PagerNavigationMode.NumericButtons">
    <DxDataGridColumn Field="@nameof(Order.ShipName)" Width="250px" />
    <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" />
</DxDataGrid>

Run Demo: Data Grid - Scrolling