DataGrid not showing horizontal scroll bar

Radzen.Blazor Components
1

I have created a RadzenDataGrid with a handful of columns, but rather than be scrollable, the grid appears to be shortening the width of the columns.

Screenshot 2025-10-27 103348
Screenshot 2025-10-27 1033481947×160 11.4 KB

My code:

 <RadzenDataGrid @ref=testGrid AllowFiltering="false" AllowColumnResize="false" AllowAlternatingRows="false" FilterMode="FilterMode.Advanced" AllowSorting="true" PageSize="10" AllowPaging="true" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true"
                 Data="@test" GridLines="@gridLines" ColumnWidth="300px" LogicalFilterOperator="LogicalFilterOperator.Or" SelectionMode="DataGridSelectionMode.Single">
     <Columns>
         <RadzenDataGridColumn Property="Employer" Title="Employer" Sortable="false" Filterable="false" Frozen="false" Width="160px" />
         <RadzenDataGridColumn Property="PositionTitle" Title="Position" Sortable="false" Filterable="false" Frozen="false" Width="160px" />
         <RadzenDataGridColumn Property="Description" Title="Description" Sortable="false" Filterable="false" Width="210px" />
         <RadzenDataGridColumn Property="Supervisor" Title="Supervisor" Sortable="false" Filterable="false" Width="160px" />
         <RadzenDataGridColumn Property="SupervisorEmail" Title="Supervisor Email" Sortable="false" Filterable="false" Width="100px" />
         <RadzenDataGridColumn Title="Current" Sortable="false" Filterable="false" Width="30px">
             <Template Context="test">
                 @if (test.CurrentBool)
                 {
                     <RadzenText>Yes</RadzenText>
                 }
                 else
                 {
                     <RadzenText>No</RadzenText>
                 }
             </Template>
         </RadzenDataGridColumn>
         <RadzenDataGridColumn Title="External" Sortable="false" Filterable="false" Width="30px">
             <Template Context="test">
                 @if (test.External)
                 {
                     <RadzenText>Yes</RadzenText>
                 }
                 else
                 {
                     <RadzenText>No</RadzenText>
                 }
             </Template>
         </RadzenDataGridColumn>
         <RadzenDataGridColumn Title="Teacher" Sortable="false" Filterable="false" Width="30px">
             <Template Context="test">
                 @if (test.Teacher)
                 {
                     <RadzenText>Yes</RadzenText>
                 }
                 else
                 {
                     <RadzenText>No</RadzenText>
                 }
             </Template>
         </RadzenDataGridColumn>
         <RadzenDataGridColumn Property="StartDate" Title="Start Date" Sortable="false" Filterable="false" FormatString="{0:d}" Width="30px" />
         <RadzenDataGridColumn Property="EndDate" Title="End Date" Sortable="false" Filterable="false" FormatString="{0:d}" Width="30px" />
     </Columns>
 </RadzenDataGrid>
2

Hi @Garrett_McClure,

Is this reproducible in the online demos?

Have a look at this and this thread as they seem to discuss similar issues.

Looking at your code, you may also want to set larger width for the template columns, since a width of 30px is too small value for the contents + paddings inside.

3

Yes, I tried those solutions, but unfortunately nothing worked. I also increased the size of the template columns, but still no success.

4

An update: I finally got it to work… sort of. I had to keep increasing the column width relative to each other, way more than I normally would for a grid, but eventually the scroller appeared.