DxDataGrid<T>.HorizontalScrollBarMode Property

Specifies the horizontal scroll bar’s display mode.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.1.dll

Declaration

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

Property Value

Type Default Description
ScrollBarMode

Hidden

One of the enumeration values.

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

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.

Data Grid - Horizontal scroll bar mode

<DxDataGrid Data="@DataSource" HorizontalScrollBarMode="ScrollBarMode.Visible">
    <DxDataGridColumn Field="@nameof(ProductFlat.Id)" 
                      Caption="Id" 
                      Width="50px">
    </DxDataGridColumn>
    <DxDataGridColumn Field="@nameof(ProductFlat.ProductName)" 
                      Caption="Product Name" 
                      Width="350px">
    </DxDataGridColumn>
    ...
</DxDataGrid>

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

Run Demo: Data Grid - Scrolling

See Also