DxDataGrid<T>.HorizontalScrollBarMode Property

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.

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.

<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