radzenhq / radzen-blazor

Radzen Blazor is a set of 90+ free native Blazor UI components packed with DataGrid, Scheduler, Charts and robust theming including Material design and FluentUI.
https://www.radzen.com
MIT License
3.63k stars 815 forks source link

DataGrid janky resize #1525

Closed iotalambda closed 6 months ago

iotalambda commented 6 months ago

In https://blazor.radzen.com/datagrid-column-resizing, run the following example:

@using RadzenBlazorDemos.Data
@using RadzenBlazorDemos.Models.Northwind
@using Microsoft.EntityFrameworkCore

@inherits DbContextPage

<RadzenDataGrid GridLines="Radzen.DataGridGridLines.Vertical" Data="@employees" TItem="Employee" AllowColumnResize>
    <Columns>
        <RadzenDataGridColumn Property="EmployeeID" Title="ID" Width="50px" TextAlign="TextAlign.Center" />
        <RadzenDataGridColumn Title="Photo" Sortable="false" Width="50px">
            <Template Context="data">
                <RadzenImage Path="@data.Photo" class="rz-gravatar" AlternateText="@(data.FirstName + " " + data.LastName)" />
            </Template>
        </RadzenDataGridColumn>
        <RadzenDataGridColumn Property="FirstName" Title="First Name" Width="100px" />
        <RadzenDataGridColumn Property="LastName" Title="Last Name" Width="100px"/>
        <RadzenDataGridColumn Property="Title" Title="Title" Width="100px" />
    </Columns>
</RadzenDataGrid>

<EventConsole @ref=@console />

@code {
    IEnumerable<Employee> employees;
    EventConsole console;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        employees = dbContext.Employees;
    }
}

https://github.com/radzenhq/radzen-blazor/assets/3705070/1fe71bba-1744-402b-889c-f585eaf07d9a

Desktop (please complete the following information):

enchev commented 6 months ago

This is how HTML table width works when you have width for all columns - you need at least one column without width: image