DataGrid header is not properly sticked when scrolling. #154

New Issue

claunia · 2026-01-29T17:32:29Z

claunia commented

2026-01-29 17:32:29 +00:00

Originally created by @OndrejUzovic on GitHub (Jul 18, 2021).

When using RadzenDataGrid with FilterMode="FilterMode.Simple" and with AllowColumnResize="true" the second header line which contains the filter moves up and partially overlaps the first header line when scrolling.

Except that, also, please notice particular header texts are not aligned.

Before scrolling:

After scrolling:

Here is the code to reproduce the problem:

<RadzenDataGrid Data="@myOrders" TItem="OrderDetail" Style="height:400px; width:500px;"
                AllowFiltering="true" FilterMode="FilterMode.Simple" AllowColumnResize="true"
                AllowSorting="true">
    <Columns>
        <RadzenDataGridColumn TItem="OrderDetail" Property="Name" Title="Name" />
        <RadzenDataGridColumn TItem="OrderDetail" Property="UnitPrice" Title="Unit Price" />
        <RadzenDataGridColumn TItem="OrderDetail" Property="Name" Title="Name" />
        <RadzenDataGridColumn TItem="OrderDetail" Property="UnitPrice" Title="Unit Price" />
        <RadzenDataGridColumn TItem="OrderDetail" Property="Name" Title="Name" />
        <RadzenDataGridColumn TItem="OrderDetail" Property="UnitPrice" Title="Unit Price" />
    </Columns>
</RadzenDataGrid>


@code {
    public class OrderDetail
    {
        public string Name { get; set; }
        public string UnitPrice { get; set; }
    }

    private List<OrderDetail> myOrders { get; } = new List<OrderDetail>()
    {
        new OrderDetail() { Name = "Name 1", UnitPrice = "10" },
        new OrderDetail() { Name = "Name 2", UnitPrice = "10" },
        new OrderDetail() { Name = "Name 3", UnitPrice = "10" },
        new OrderDetail() { Name = "Name 4", UnitPrice = "10" },
        new OrderDetail() { Name = "Name 5", UnitPrice = "10" },
        new OrderDetail() { Name = "Name 6", UnitPrice = "10" },
        new OrderDetail() { Name = "Name 7", UnitPrice = "10" },
        new OrderDetail() { Name = "Name 8", UnitPrice = "10" },
        new OrderDetail() { Name = "Name 9", UnitPrice = "10" },
        new OrderDetail() { Name = "Name 10", UnitPrice = "10" },
        new OrderDetail() { Name = "Name 11", UnitPrice = "10" },
        new OrderDetail() { Name = "Name 12", UnitPrice = "10" },
        new OrderDetail() { Name = "Name 13", UnitPrice = "10" },
        new OrderDetail() { Name = "Name 14", UnitPrice = "10" },
        new OrderDetail() { Name = "Name 15", UnitPrice = "10" },
        new OrderDetail() { Name = "Name 16", UnitPrice = "10" },
        new OrderDetail() { Name = "Name 17", UnitPrice = "10" },
        new OrderDetail() { Name = "Name 18", UnitPrice = "10" },
        new OrderDetail() { Name = "Name 19", UnitPrice = "10" },
        new OrderDetail() { Name = "Name 20", UnitPrice = "10" },
    };
}

Originally created by @OndrejUzovic on GitHub (Jul 18, 2021). When using RadzenDataGrid with `FilterMode="FilterMode.Simple"` and with `AllowColumnResize="true"` the second header line which contains the filter moves up and partially overlaps the first header line when scrolling. Except that, also, please notice particular header texts are not aligned. Before scrolling: ![image](https://user-images.githubusercontent.com/55758368/126078752-1db28eab-990f-42d7-b704-c385c5d556e4.png) After scrolling: ![image](https://user-images.githubusercontent.com/55758368/126078804-0794dfc5-66b9-48a6-921f-cfceb4a75dc8.png) Here is the code to reproduce the problem: ``` <RadzenDataGrid Data="@myOrders" TItem="OrderDetail" Style="height:400px; width:500px;" AllowFiltering="true" FilterMode="FilterMode.Simple" AllowColumnResize="true" AllowSorting="true"> <Columns> <RadzenDataGridColumn TItem="OrderDetail" Property="Name" Title="Name" /> <RadzenDataGridColumn TItem="OrderDetail" Property="UnitPrice" Title="Unit Price" /> <RadzenDataGridColumn TItem="OrderDetail" Property="Name" Title="Name" /> <RadzenDataGridColumn TItem="OrderDetail" Property="UnitPrice" Title="Unit Price" /> <RadzenDataGridColumn TItem="OrderDetail" Property="Name" Title="Name" /> <RadzenDataGridColumn TItem="OrderDetail" Property="UnitPrice" Title="Unit Price" /> </Columns> </RadzenDataGrid> @code { public class OrderDetail { public string Name { get; set; } public string UnitPrice { get; set; } } private List<OrderDetail> myOrders { get; } = new List<OrderDetail>() { new OrderDetail() { Name = "Name 1", UnitPrice = "10" }, new OrderDetail() { Name = "Name 2", UnitPrice = "10" }, new OrderDetail() { Name = "Name 3", UnitPrice = "10" }, new OrderDetail() { Name = "Name 4", UnitPrice = "10" }, new OrderDetail() { Name = "Name 5", UnitPrice = "10" }, new OrderDetail() { Name = "Name 6", UnitPrice = "10" }, new OrderDetail() { Name = "Name 7", UnitPrice = "10" }, new OrderDetail() { Name = "Name 8", UnitPrice = "10" }, new OrderDetail() { Name = "Name 9", UnitPrice = "10" }, new OrderDetail() { Name = "Name 10", UnitPrice = "10" }, new OrderDetail() { Name = "Name 11", UnitPrice = "10" }, new OrderDetail() { Name = "Name 12", UnitPrice = "10" }, new OrderDetail() { Name = "Name 13", UnitPrice = "10" }, new OrderDetail() { Name = "Name 14", UnitPrice = "10" }, new OrderDetail() { Name = "Name 15", UnitPrice = "10" }, new OrderDetail() { Name = "Name 16", UnitPrice = "10" }, new OrderDetail() { Name = "Name 17", UnitPrice = "10" }, new OrderDetail() { Name = "Name 18", UnitPrice = "10" }, new OrderDetail() { Name = "Name 19", UnitPrice = "10" }, new OrderDetail() { Name = "Name 20", UnitPrice = "10" }, }; } ```

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#154