Freeze group headers when scrolling horizontally?

Hi there, I recently came across your grouping feature and found that it looked perfect, except for one thing - my table is wide enough that it needs to scroll horizontally, and the group header text disappears offscreen when the page is scrolled. I have frozen the important columns but I couldn't find a way to also freeze the header text. Is such a thing currently possible?

Thanks

Example code:

<RadzenDataGrid TItem=@Item Data=@items
    Render=@OnRender Style="height: 300px; width: 700px" AllGroupsExpanded=false>

    <Columns>
        <RadzenDataGridColumn Width="150px" Title="Name" TItem=@Item Property="Name" Frozen=true />
        <RadzenDataGridColumn Width="300px" Title="Property 1" TItem=@Item Property="Property1" />
        <RadzenDataGridColumn Width="300px" Title="Property 2" TItem=@Item Property="Property2" />
    </Columns>
</RadzenDataGrid>

@code
{
    class Item
    {
        public string Customer { get; set; } = "";
        public string Invoice { get; set; } = "";
        public string Name { get; set; } = "";
        public string Property1 { get; set; } = "property 1 value";
        public string Property2 { get; set; } = "property 2 value";
    }

    List<Item> items = new()
    {
        new() { Customer = "a", Invoice = "1", Name = "Bob", Property1 = "1st item for a.1" },
        new() { Customer = "a", Invoice = "1", Name = "James", Property1 = "2nd item for a.1" },
        new() { Customer = "a", Invoice = "2", Name = "Peter", Property1 = "1nd item for a.2" },
        new() { Customer = "b", Invoice = "1", Name = "Kye", Property1 = "1st item for b.1" },
        new() { Customer = "b", Invoice = "1", Name = "Madison", Property1 = "2nd item for b.2" },
    };
    
    void OnRender(DataGridRenderEventArgs<Item> args)
    {
        if(args.FirstRender)
        {
            args.Grid.Groups.Add(new GroupDescriptor(){ Property = "Customer" });
            args.Grid.Groups.Add(new GroupDescriptor(){ Property = "Invoice" });
            StateHasChanged();
        }
    }
}

At the moment this is not supported out-of-the-box. Maybe it's possible with some custom CSS for rz-group-row unfortunately we are not aware of such.

Ok, thank you for letting me know, I'll have a play with it to see if I can get anything to work

@ThatCoolCoder Have you found a solution to this? This is a fairly big issue for our team.

1 Like

I run in the same problem some time ago.

Found no solution by myself as Iยดm no css guru. If someone has a solution, it would be highly appreciate :slight_smile:

I tried a few things with css but wasn't able to get anything to work. As the table was in a part of the application that was for low-volume internal use I just left it how it was.