Column Resizing issue

[Brian80]

I have noticed a weird issue with resizing a column but wasn't able to quite figure out what the difference was between my code and the example code. I have seen other topics on this before like this:

DataGrid resizing problem

when i try to resize one column in the grid every other column is resizing too i've set ColumnWidth parameter in RadzenDataGrid and Width for every RadzenDataGridColumn. What have i missed my grid [Video2] your demo grid [Video3]

Sensitive resizing of DataGrid columns

I've noticed that some of my DataGrid pages tend to jump around in column width the moment I drag the column to resize it. It seems to disappear when I remove the column width set on the individual columns. Is this a known issue? For now I'll avoid setting widths on individual columns if AllowColumnResize="true"

I think I figured out what the issue is and I was able to recreate it with the sample demo code. Not sure if there is a css fix or something but it seems to relate to whether the horizontal scroll bar is showing or not. If the horizontal scroll bar is showing, then resizing is fine. If there is no horizontal scroll bar, then when you resize the column, it is a little jumpy and can cause other columns to resize.

To recreate this on the Radzen column resizing example, modify the code to only have the first 4 columns and make sure when the page loads there is no horizontal scroll. If you try to resize the First Name column, all other columns will resize slightly also. I think this is just the browser trying to refit everything without adding the horizontal scroll bar.

Blazor DataGrid Component - Column Resizing | Free UI Components by Radzen

[enchev]

The resizing depends on the columns width setting - in this particular demo you might get better results if you remove min/max widths defined for Photo column.

[Brian80]

I have cut the sample code on the page down to this:

<RadzenDataGrid GridLines="Radzen.DataGridGridLines.Vertical" Data="@employees" TItem="Employee" ColumnWidth="300px" AllowColumnResize="true" ColumnResized=@OnColumnResized>
    <Columns>        
        <RadzenDataGridColumn Property="@nameof(Employee.FirstName)" Title="First Name" />
        <RadzenDataGridColumn Property="@nameof(Employee.LastName)" Title="Last Name" Width="150px"/>
        <RadzenDataGridColumn Property="@nameof(Employee.Title)" Title="Title" />
    </Columns>
</RadzenDataGrid>

If I resize any column, it does these following things:

• It jumps to enlarge when I first click to resize
• When I resize one column, it adjusts the other columns
• When I am done resizing and release the mouse button, the column then jumps to a larger size than what I resized it to.

This behavior only occurs until there is a horizontal scroll bar for the table. Once that shows up (or if it exists to start with) then resizing works as expected.

[enchev]

I'm afraid that this is how the HTML table behaves depending on the current columns width. Here is the code that will calculate the new width during resize:

Radzen.Blazor/wwwroot/Radzen.Blazor.js

I you feed there is a better way to do that you can submit pull request.