Blazor Datagrid horizontal scroll

Hey,

I'm using the datagrid to display 15 columns which naturally exceeds over the border. What happens is that the horizontal scrolling bar appears on the whole page at the bottom and not at the datagrid. So the navgivation are not visible for example.

Here is my code: I'm using the standard Blazor layout that gets initiliased starting a new project.

    <RadzenDropDown @bind-Value="pageSize" Data="@(new List<int>() { 10, 15, 50, 100 })" Style="margin-bottom: 20px" Change="@Change" />
<RadzenGrid @ref="grid" AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" FilterMode="FilterMode.Advanced" AllowPaging="true" PageSize=@pageSize
            AllowSorting="true" Data="@itemList" TItem="MyItem" AllowColumnResize="true" ColumnWidth="150px">
    <Columns>
        <RadzenGridColumn TItem="MyItem" Property="" Title="">
            <FooterTemplate>
                Total equips: <b>@itemList.Count()</b>
            </FooterTemplate>
        </RadzenGridColumn>
        <RadzenGridColumn TItem="MyItem" Property="" Title="" />
        <RadzenGridColumn TItem="MyItem" Property="" Title="" />
        <RadzenGridColumn TItem="MyItem" Property="" Title="" />
        <RadzenGridColumn TItem="MyItem" Property="" Title=""/>
        <RadzenGridColumn TItem="MyItem" Property="" Title="" />
        <RadzenGridColumn TItem="MyItem" Property="" Title=""/>
        <RadzenGridColumn TItem="MyItem" Property="" Title=""/>
        <RadzenGridColumn TItem="MyItem" Property="" Title=""/>
        <RadzenGridColumn TItem="MyItem" Property="" Title=""/>
        <RadzenGridColumn TItem="MyItem" Property="" Title=""/>
        <RadzenGridColumn TItem="MyItem" Property="" Title=""/>
        <RadzenGridColumn TItem="MyItem" Property="" Title=""/>
        <RadzenGridColumn TItem="MyItem" Property="" Title=""/>
        <RadzenGridColumn TItem="MyItem" Property="" Title=""/>
        <RadzenGridColumn TItem="MyItem" Property="" Title=""/>
        <RadzenGridColumn TItem="MyItem" Property="" Title=""/>
    </Columns>
</RadzenGrid>

How do I get the scrollbar to appear at the datagrid itself like in the example?

Hey @hekra,

You can set width for the DataGrid component or use Bootstrap to arrange your layout:

1 Like