Horizontal scrolling in Datagrid

Radzen.Blazor Components
1

Hello i have searched around but i didnt come across any issue similar to mine. I have a datagrid like below and i want each column to fit the data of the column and since i have almost 50 columns to be able to scroll horizontally. But the column width is tiny and i cant scroll.

i have tried the following :

  1. make the column width adjustable by hand when i resize a column all the others are becoming almost extinct.
  2. set a ColumnWidth="120px" but now the columns oveflow the width of the datagrid
  3. AllowColumnResize="true" AllowColumnReorder="true"
  4. with style Style="height: 600px; overflow-x: auto; width: 100%; table-layout: auto; white-space: nowrap; scroll-direction: horizontal;"

but still nothing.

> 
> <RadzenDataGrid TItem="AgentSearchDto" Data="@employees" PageSize="10" AllowPaging="true" ColumnWidth="auto" AllowColumnResize="true" AllowSorting="true">
>            <Columns>
>                   <RadzenDataGridColumn TItem="AgentSearchDto" Property="AgentName" Title="Agent Name"  />
>                             <RadzenDataGridColumn TItem="AgentSearchDto" Property="AgentNameEn" Title="Agent Name (EN)"  />
>                             <RadzenDataGridColumn TItem="AgentSearchDto" Property="AgentId" Title="Agent ID"  />
>    ..........
>  </RadzenDataGrid>

image
image2434×612 18 KB

Thanks a lot!

2

The requirement for enabling horizontal scrolling is to either set ColumnWidth or the Width of the data grid columns. Here is a live demo:

3

i tried that but still nothing. i played around with it and i figured out that it was because i had the datagrid inside a "table" in a "tr" tag. once i put it in a "div" it worked properly. why is that?