Issue with Group headers when Hierarchy (master-detail) enabled

I'm using the DataGrid with grouping and expanded rows. When the expand column is added to the grid, the group headers no longer align with the grid.

Seems this is a bug. On the group header row, the cell with the text has the wrong colspan.

Hi @thedudeintx,

I am afraid I don't see what the problem is from the screenshot. Also providing some sample code which would allow us to reproduce the problem would help. Please elaborate on your question.

The issue is just styling related. I have group headers that are styled with a different background color. In the screenshot, you can see that the group headers are not extending the full width of the grid (stopping before the last column). This happens when you enable the expander column. The group header is not taking into account the additional column with the icon to expand the row. So, in this example, the colspan of the group header is 4 and should be 5

Here's a basic example that reproduces the issue

<RadzenDataGrid Data="_data" TItem="TestData" AllowGrouping="false" Render="OnGridRender" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
                GroupRowRender="OnGroupRowRender" ExpandMode="DataGridExpandMode.Multiple">
    <GroupHeaderTemplate>
        <span class="h3 text-white">@context.Data.Key</span>
    </GroupHeaderTemplate>
    <Template>
        <RadzenCard>Extra Content</RadzenCard>
    </Template>
    <Columns>
        <RadzenDataGridColumn TItem="TestData" Property="Category" Title="Category" />
        <RadzenDataGridColumn TItem="TestData" Property="Value1" Title="Value1" />
        <RadzenDataGridColumn TItem="TestData" Property="Value2" Title="Value2" />
        <RadzenDataGridColumn TItem="TestData" Property="Value3" Title="Value3" />
        <RadzenDataGridColumn TItem="TestData" Property="Value4" Title="Value4" />
    </Columns>
</RadzenDataGrid>

@code
{
    private IEnumerable<TestData> _data = new List<TestData>()
    {
        new() { Category = "AAA", Value1 = "100", Value2 = "200", Value3 = "300", Value4 = "400" },
        new() { Category = "AAA", Value1 = "100", Value2 = "200", Value3 = "300", Value4 = "400" },
        new() { Category = "AAA", Value1 = "100", Value2 = "200", Value3 = "300", Value4 = "400" },
        new() { Category = "AAA", Value1 = "100", Value2 = "200", Value3 = "300", Value4 = "400" },
        new() { Category = "AAA", Value1 = "100", Value2 = "200", Value3 = "300", Value4 = "400" },
        new() { Category = "BBB", Value1 = "100", Value2 = "200", Value3 = "300", Value4 = "400" },
        new() { Category = "BBB", Value1 = "100", Value2 = "200", Value3 = "300", Value4 = "400" },
        new() { Category = "BBB", Value1 = "100", Value2 = "200", Value3 = "300", Value4 = "400" },
        new() { Category = "BBB", Value1 = "100", Value2 = "200", Value3 = "300", Value4 = "400" },
        new() { Category = "BBB", Value1 = "100", Value2 = "200", Value3 = "300", Value4 = "400" },
    };

    private void OnGridRender(DataGridRenderEventArgs<TestData> args)
    {
        if (args.FirstRender)
        {
            args.Grid.Groups.Add(new GroupDescriptor { Title = "Category", Property = "Category", SortOrder = SortOrder.Ascending });
            StateHasChanged();
        }
    }

    private void OnGroupRowRender(GroupRowRenderEventArgs args)
    {
        args.Attributes.Add("style", "background-color: #20c997;");
    }

    public class TestData
    {
        public string Category { get; set; }
        public string Value1 { get; set; }
        public string Value2 { get; set; }
        public string Value3 { get; set; }
        public string Value4 { get; set; }
    }
}

You'll see that the styling for the group header doesn't extend under the Value4 column.

If you inspect this group header row, you can increase the colspan to correct it.

Thanks @thedudeintx! It will be fixed in our next update early next week!