The Width specified in the outermost grid column is controlling the first child column width, which is clearly a bug.
After adjusting the size on line 23 <RadzenDataGridColumn Title="Title" Property="@nameof(Employee.TitleOfCourtesy)" Filterable=@allowCompositeDataCells Sortable=@allowCompositeDataCells Width="600px"> we now get 600px
Here is what I see in our demo:
820px is set exactly where it should be.
The first child (FirstName column) width is as declared:
Hi @enchev
I'm reacting to the width of 'Job Title'. Its requested width is 200px. But, its actually 820. I gather the 820px width request for 'Title' is being applied to the first of the 5 columns it is spanning.
I'm working with a page where we have a colspan of like 15, and its very obviously a problem that the first column ends up extremely wide. When I tried not specifying the width for the outermost column the table wouldn't have the necessary horizontal scroll. Either way we end up with something that isn't really legible.
I see now what you are referring. Indeed even if the width is correctly and explicitly specified the cell will be stretched to occupy the calculated width by the parent - this is how HTML table works.
Ok. Is there anything we can do to get the expected behavior? In the demo, certainly looks like the job title isn't supposed to be that wide.
This gets past how much I know about css, but a very simple example did do what I expected.
All the columns rendered at their target sizes, unless the parent headers had a required width that was larger than their children summed up.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="3" style="width:600px">Name</th>
<th rowspan="3" style="width:200px">Age</th>
</tr>
<tr>
<th colspan="2" style="width:300px">Name</th>
<th rowspan="2" style="width:300px">Title</th>
</tr>
<tr>
<th style="width:100px">First</th>
<th style="width:200px">Last</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>Ms</td>
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>Mr</td>
<td>57</td>
</tr>
</table>
</body>
</html>
Maybe this CSS will help you to achieve desired result:
<style>
.rz-grid-table {
width: unset;
}
</style>
Here is how it looks the demo in this case:
Hi @enchev
Yes, unsetting width helps. I found that if I also use MinWidth instead of Width for the child columns you get the requested width.
So this looks like a good workaround.
Thanks
