DataGrid janky resize #1241

New Issue

claunia · 2026-01-29T17:50:54Z

claunia commented

2026-01-29 17:50:54 +00:00

Originally created by @iotalambda on GitHub (May 23, 2024).

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):

OS: Windows
Browser: chrome, firefox

Originally created by @iotalambda on GitHub (May 23, 2024). In https://blazor.radzen.com/datagrid-column-resizing, run the following example: ```razor @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):** - OS: Windows - Browser: chrome, firefox

claunia closed this issue

2026-01-29 17:50:54 +00:00

claunia commented

2026-01-29 17:50:55 +00:00

@enchev commented on GitHub (May 23, 2024):

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

@enchev commented on GitHub (May 23, 2024): This is how HTML table width works when you have width for all columns - you need at least one column without width: ![image](https://github.com/radzenhq/radzen-blazor/assets/5804953/1e9acfd7-bfe1-4bbd-a101-3cfd53394cca)

claunia referenced this issue

2026-01-29 18:19:40 +00:00

[PR #1241] Fix DataGrid Column Resizing demo #2618

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/radzen-blazor#1241