Adem
February 2, 2022, 10:34am
1
Hi,
I'm trying to create a DataGrid as in the example.
<RadzenDataGrid Data="@_details" TItem="Detail" Style="width: 1800px; margin: auto" ColumnWidth="300px">
<Columns>
<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column1)" Title="Column1" TextAlign="TextAlign.Center" />
<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column2)" Title="Column2" TextAlign="TextAlign.Center" />
<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column3)" Title="Column3" TextAlign="TextAlign.Center" />
<RadzenDataGridColumn TItem="Detail" Title="Column4" TextAlign="TextAlign.Center">
<Columns>
<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column4a)" Title="Column4a" TextAlign="TextAlign.Center" />
<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column4b)" Title="Column4b" TextAlign="TextAlign.Center" />
</Columns>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="Detail" Title="Column5" TextAlign="TextAlign.Center">
<Columns>
<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column5a)" Title="Column5a" TextAlign="TextAlign.Center" />
<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column5b)" Title="Column5b" TextAlign="TextAlign.Center" />
<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column5c)" Title="Column5c" TextAlign="TextAlign.Center" />
</Columns>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="Detail" Title="Column6" TextAlign="TextAlign.Center">
<Columns>
<RadzenDataGridColumn TItem="Detail" Title="Column6a" TextAlign="TextAlign.Center">
<Columns>
<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column6a1)" Title="Column6a1" TextAlign="TextAlign.Center" />
<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column6a2)" Title="Column6a2" TextAlign="TextAlign.Center" />
<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column6a3)" Title="Column6a3" TextAlign="TextAlign.Center" />
</Columns>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="Detail" Title="Column6b" TextAlign="TextAlign.Center">
<Columns>
<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column6b1)" Title="Column6b1" TextAlign="TextAlign.Center" />
</Columns>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column6c)" Title="Column6c" TextAlign="TextAlign.Center" />
</Columns>
</RadzenDataGridColumn>
</Columns>
</RadzenDataGrid>
@code {
IEnumerable<Detail> _details;
protected override void OnInitialized()
{
_details = new[]
{
new Detail
{
Column1 = RandomString.GenerateAlphanumeric(),
Column2 = RandomString.GenerateAlphanumeric(),
Column3 = RandomString.GenerateAlphanumeric(),
Column4a = RandomString.GenerateAlphanumeric(),
Column4b = RandomString.GenerateAlphanumeric(),
Column5a = RandomString.GenerateAlphanumeric(),
Column5b = RandomString.GenerateAlphanumeric(),
Column5c = RandomString.GenerateAlphanumeric(),
Column6a1 = RandomString.GenerateAlphanumeric(),
Column6a2 = RandomString.GenerateAlphanumeric(),
Column6a3 = RandomString.GenerateAlphanumeric(),
Column6b1 = RandomString.GenerateAlphanumeric(),
Column6c = RandomString.GenerateAlphanumeric()
}
};
}
internal class Detail
{
public string Column1 { get; set; }
public string Column2 { get; set; }
public string Column3 { get; set; }
public string Column4a { get; set; }
public string Column4b { get; set; }
public string Column5a { get; set; }
public string Column5b { get; set; }
public string Column5c { get; set; }
public string Column6a1 { get; set; }
public string Column6a2 { get; set; }
public string Column6a3 { get; set; }
public string Column6b1 { get; set; }
public string Column6c { get; set; }
}
}
It ends up like this:
Even though I set the width per column, it's not rendered properly.
I'm not sure if I'm using it wrong or it has a bug since it's a new feature. I came across Radzen yesterday so it's pretty new to me.
1 Like
enchev
February 2, 2022, 10:38am
2
Adem:
ColumnWidth="300px"
This setting will be applied to all columns and since in this case some columns have child columns the width cannot be strictly 300px.
Adem
February 2, 2022, 10:49am
3
Thanks for quick response. I had tried it and it didn't work either. Let me show you how it's rendered in this case.
I added the width per column except parent header.
<RadzenDataGrid Data="@_details" TItem="Detail" Style="width: 1800px; margin: auto">
<Columns>
<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column1)" Title="Column1" Width="200px" TextAlign="TextAlign.Center" />
<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column2)" Title="Column2" Width="200px" TextAlign="TextAlign.Center" />
<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column3)" Title="Column3" Width="200px" TextAlign="TextAlign.Center" />
<RadzenDataGridColumn TItem="Detail" Title="Column4" TextAlign="TextAlign.Center">
<Columns>
<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column4a)" Width="200px" Title="Column4a" TextAlign="TextAlign.Center" />
<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column4b)" Width="200px" Title="Column4b" TextAlign="TextAlign.Center" />
</Columns>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="Detail" Title="Column5" TextAlign="TextAlign.Center">
<Columns>
<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column5a)" Width="200px" Title="Column5a" TextAlign="TextAlign.Center" />
<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column5b)" Width="200px" Title="Column5b" TextAlign="TextAlign.Center" />
<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column5c)" Width="200px" Title="Column5c" TextAlign="TextAlign.Center" />
</Columns>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="Detail" Title="Column6" TextAlign="TextAlign.Center">
<Columns>
<RadzenDataGridColumn TItem="Detail" Title="Column6a" TextAlign="TextAlign.Center">
<Columns>
<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column6a1)" Width="200px" Title="Column6a1" TextAlign="TextAlign.Center" />
<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column6a2)" Width="200px" Title="Column6a2" TextAlign="TextAlign.Center" />
<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column6a3)" Width="200px" Title="Column6a3" TextAlign="TextAlign.Center" />
</Columns>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="Detail" Title="Column6b" TextAlign="TextAlign.Center">
<Columns>
<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column6b1)" Width="200px" Title="Column6b1" TextAlign="TextAlign.Center" />
</Columns>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="Detail" Property="@nameof(Detail.Column6c)" Width="200px" Title="Column6c" TextAlign="TextAlign.Center" />
</Columns>
</RadzenDataGridColumn>
</Columns>
</RadzenDataGrid>
The result is:
Even though I set the width 200px per column, not all of them have that width.
enchev
February 2, 2022, 10:57am
4
Adem:
width: 1800px
Maybe you need to remove the width set for the entire component. Radzen DataGrid is using table-layout: fixed
and columns Width is rendered as style="width: XXX"
for cells - how HTML table will distribute width across columns can be found here:
https://drafts.csswg.org/css2/#width-layout
Adem
February 2, 2022, 10:59am
5
I have removed 'width: 1800px' and nothing has changed unfortunately.
enchev
February 2, 2022, 11:04am
6
I suggest you to check my previous reply. Here is a illustration with plain HTML table, the header cell width is set to 200px however it is not rendered with such width:
Adem
February 2, 2022, 12:16pm
7
I have removed all width sets from the entire component except for Style="width: 1800px". The screen width is equally distributed among the columns now, which is good. However I still need Style=width because when I resize the browser, the columns are re-rendered based on the new width. Therefore they are getting even smaller. I want a horizontal scroll to appear, which it does but it is of the browser, not of the DataGrid.
I don't think DataGrid's scrollbar will appear without widths. Am I wrong?
I have added more columns. This is how it's look like now:
Only the first column has a fixed width.
Adem
February 2, 2022, 3:46pm
8
The problem solved! I have overridden some css classes and now the horizontal scroll bar also appears. I have added this;
.rz-grid-table {
width: auto;
}
td {
min-width: 70px;
}