DataGrid with horizontal scrollbar and auto width for columns

Radzen.Blazor Components
1

I need a DataGrid with:

  1. Horizontal scrollbar automatically shows/dissapears if it required more space or if it has enough space to show its content.

  2. Columns with auto width. And no word wrapping allowed - all data in a single line. I can't set column width by hand, because several columns contain data of several lengths, and it is required the columns width be the same as the max length of its data.

  3. Datagrid should occupy the whole container's width.

I set no property such ColumnWidth at Radzen DataGrid. Columns are generated through loop without setting any width for them also. At this conditions Radzen generates a table with:

  1. Uniform width for columns - whatsoever data width they have. not desirable
  2. Table occupies the whole container's width. desirable
  3. All data in cells that has not enough space are just truncated. not desirable
  4. No horizontal scrollbar appeared, even when there is not enough space in table cells to show its data with its whole length. not desirable
2

Auto width for our DataGrid columns is not supported.

3

Hmm... And if we go outside of Radzen restrictions? - I tried to override some Radzen styles:

.rz-grid-table-fixed { table-layout: auto; }

or even

table { table-layout: auto; }

then I can get the desired behaviour at least with column widths. BUT! I found out, that Radzen always overrides my styles:

  • Style property of RadzenDataGrid component doesn't work (no matter how - my own style - for example rz-grid-table-auto - in the global css file and then Style="rz-grid-table-auto", or just placing the style setting inside this property)
  • css file of my Blazor component (Blazor CSS isolation) with RadzenDataGrid doesn't work
  • using my own global style for table-layout or overriding this table property globally through Radzen style rz-grid-table-fixed doesn't work

The only way to override Radzen style is to place my global css file UNDER the Radzen's css file inside _Host.cshtml:

<link href="...Radzen.Blazor/css/material-base.css">
<link href="...myGlobal.css">

But the issue is, that this is global overriding, and I want to override only a specific table in a specific Blazor component.

4

I'm afraid I don't understand. You post is in category Radzen.Blazor component however you are referring Radzen. Is this Radzen IDE? Or Radzen Blazor Studio? No matter what you are using you can target desired DataGrid similar to this thread:

5

I'm using Radzen components inside a Blazor project in Visual Studio.

According to your link - with id selector and class selector it works (with just id selector - no). And it works even if my own css file is ABOVE Radzen's one:

  • inside my global css (but not Blazor component CSS - CSS isolation doesn't work here whatever)

#mytable .rz-grid-table-fixed { table-layout: auto; }

  • inside my Blazor component

<RadzenDataGrid id="mytable">

Now I get rid of my issues 1, 3, and 4 in my first message, and can isolate the desired behavior for only a single table. Thank you.

It seems like it was quite easy to get the desired behaviour with auto width for columns just overriding the table-layout property. I'm just not a pro in HTML and CSS, therefore it took hours for me to find the solution. Why did you say "Auto width for our DataGrid columns is not supported."? Perhaps there are some drawbacks with my solution, which are related to RadzenDataGrid? Do you see some?

6

There are DataGrid features that will not work with table-layout: auto. Frozen columns, composite columns, who knows what else.