DataGrid Composite Column Width

Radzen.Blazor Components
1

Hi,

I am looking for some guidance on understanding column width for composite columns for the DataGrid component. If I use a single row of columns, the widths function exactly as expected. If I use a composite column, some of the widths function as expected but there is always at least one column that displays an incorrect width.

Looking at the demo, it appears it suffers from a similar issue:

In the demo, you can see the following columns are all set to 140px:

image
image776×132 14.3 KB

However you can see that for some reason postal code is much bigger than that:

image
image926×303 10.9 KB

It appears it is displaying at 300px width like the last column.

Is this behavior expected? I will share my code as another example if necessary but I think the demo shows the behavior in the same exact way.

Thank you!

2
3

Hi,

Thanks for the response. I will share my personal project example then as I have a variable column width set for my first column to expand to take the empty space.

If I do not use composite columns, this works exactly as expected:

image
image753×133 8.81 KB

                                                    <Columns>
                                                        <RadzenDataGridColumn TItem="Models.DB.StaticData.PinDefinition" Property="Name" Title="Pin Name" Width="99%" />
                                                                <RadzenDataGridColumn TItem="Models.DB.StaticData.PinDefinition" Property="MinGauge" Title="Min" Width="50px"  />
                                                                <RadzenDataGridColumn TItem="Models.DB.StaticData.PinDefinition" Property="MaxGauge" Title="Max" Width="50px" />
                                                                <RadzenDataGridColumn TItem="Models.DB.StaticData.PinDefinition" Property="MinStripLength" Title="Min" Width="50px" />
                                                                <RadzenDataGridColumn TItem="Models.DB.StaticData.PinDefinition" Property="SetStripLength" Title="Set" Width="50px" />
                                                                <RadzenDataGridColumn TItem="Models.DB.StaticData.PinDefinition" Property="MaxStripLength" Title="Max" Width="50px" />
                                                        <RadzenDataGridColumn TItem="Models.DB.StaticData.PinDefinition" Property="BasePrice" Title="Base Price" Width="100px" >
                                                            <Template Context="pin">
                                                                ...
                                                            </Template>
                                                        </RadzenDataGridColumn>
                                                        <RadzenDataGridColumn TItem="Models.DB.StaticData.PinDefinition" Property="IsInStock" Title="In Stock" Width="150px">
                                                            <Template Context="pin">
                                                                ...
                                                            </Template>
                                                        </RadzenDataGridColumn>
                                                    </Columns>

When I add in composite columns, I am seeing this behavior:

image
image762×166 11.2 KB

                                                    <Columns>
                                                        <RadzenDataGridColumn TItem="Models.DB.StaticData.PinDefinition" Property="Name" Title="Pin Name" Width="99%" />
                                                        <RadzenDataGridColumn TItem="Models.DB.StaticData.PinDefinition" Title="Wire Gauge" Frozen="true"  Sortable="false" Filterable="false" TextAlign="TextAlign.Center" Width="50px" >
                                                            <Columns>
                                                                <RadzenDataGridColumn TItem="Models.DB.StaticData.PinDefinition" Property="MinGauge" Title="Min" Width="50px"  />
                                                                <RadzenDataGridColumn TItem="Models.DB.StaticData.PinDefinition" Property="MaxGauge" Title="Max" Width="50px" />
                                                            </Columns>
                                                        </RadzenDataGridColumn>                                               
                                                        <RadzenDataGridColumn TItem="Models.DB.StaticData.PinDefinition" Title="Strip Length" Frozen="true"  Sortable="false" Filterable="false" TextAlign="TextAlign.Center" Width="50px" >
                                                            <Columns>
                                                                <RadzenDataGridColumn TItem="Models.DB.StaticData.PinDefinition" Property="MinStripLength" Title="Min" Width="50px" />
                                                                <RadzenDataGridColumn TItem="Models.DB.StaticData.PinDefinition" Property="SetStripLength" Title="Set" Width="50px" />
                                                                <RadzenDataGridColumn TItem="Models.DB.StaticData.PinDefinition" Property="MaxStripLength" Title="Max" Width="50px" />
                                                            </Columns>
                                                        </RadzenDataGridColumn>                  
                                                        <RadzenDataGridColumn TItem="Models.DB.StaticData.PinDefinition" Property="BasePrice" Title="Base Price" Width="100px" >
                                                            <Template Context="pin">
                                                                ...
                                                            </Template>
                                                        </RadzenDataGridColumn>
                                                        <RadzenDataGridColumn TItem="Models.DB.StaticData.PinDefinition" Property="IsInStock" Title="In Stock" Width="150px">
                                                            <Template Context="pin">
                                                               ....
                                                            </Template>
                                                        </RadzenDataGridColumn>
                                                    </Columns>

I am not an HTML/CSS expert so if I am still misunderstanding that this shouldn't work please let me know - but I would expect that if it works without composite columns adding in composite columns should not change break the sizing.

Thank you!

4

For anyone else with the same issue -
Do not use Width= on the RadzenDataGridColumn objects. It applies the width to the "col" entities which causes all of these issues when using multiple rows of headers. Put your widths into CSS and use HeaderCssClass= on the RadzenDataGridColumn and everything will work as expected.

This seems like a bug to me but at least I have it working now. I will leave that call up the Radzen team.

1 Like