[PR #1265] [MERGED] Stop all groups collapsing when switching to and from edit mode #2635

Open
opened 2026-01-29 18:19:46 +00:00 by claunia · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/radzenhq/radzen-blazor/pull/1265
Author: @liam-gray
Created: 11/30/2023
Status: Merged
Merged: 11/30/2023
Merged by: @enchev

Base: masterHead: master


📝 Commits (1)

  • 1921acc Stop all groups collapsing when switching to and from edit mode

📊 Changes

1 file changed (+4 additions, -1 deletions)

View changed files

📝 Radzen.Blazor/RadzenDataGrid.razor.cs (+4 -1)

📄 Description

Under these conditions, when switching to or from edit mode, all groups revert to collapsed state:

  • Grouping is active
  • Editing is enabled (EditRow / CancelEditRow can be triggered by the user)
  • AllGroupsExpanded is set to false (such that groups are initially collapsed)

In version 4.11.2 and earlier, groups would retain their collapsed/expanded state when switching to or from edit mode, following the merge of #989 in 4.12.0, all groups become collapsed.

Reproducible in the demo pages by pasting the following grid setup (slightly modified version of the Grouping API https://blazor.radzen.com/datagrid-grouping-api demo to add editing and set AllGroupsExpanded to false)

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

@inherits DbContextPage

<div style="display: flex; align-items: center; margin-bottom: 16px">
    <RadzenCheckBox TriState="true" TValue="bool?" @bind-Value="@allGroupsExpanded" Name="allGroupsExpanded" Change="@ToggleGroups" />
    <RadzenLabel Text="All groups expanded by default" Component="allGroupsExpanded" Style="margin-left: 8px; margin-right: 32px; vertical-align: middle;" />
    <RadzenButton Text="Expand all groups" Click="@(args => ToggleGroups(true))" style="margin-right: 16px" Disabled=@(allGroupsExpanded == true) />
    <RadzenButton Text="Collapse all groups" Click="@(args => ToggleGroups(false))" Disabled=@(allGroupsExpanded == false) />
</div>
<RadzenDataGrid @ref=grid AllowGrouping="true" AllowFiltering="true" AllowColumnResize="true" FilterMode="FilterMode.Advanced" PageSize="5" AllowPaging="true" AllowSorting="true" 
    Data="@employees" TItem="Employee" ColumnWidth="160px" LogicalFilterOperator="LogicalFilterOperator.Or" Render="@OnRender" 
        HideGroupedColumn="true"
        AllGroupsExpanded=@false EditMode="DataGridEditMode.Single">
    <Columns>
        <RadzenDataGridColumn TItem="Employee" Property="EmployeeID" Filterable="false" Title="ID" Frozen="true" Width="80px" TextAlign="TextAlign.Center" />
        <RadzenDataGridColumn TItem="Employee" Title="Photo" Sortable="false" Filterable="false" Frozen="true" Groupable="false" Width="80px" TextAlign="TextAlign.Center" >
            <Template Context="data">
                <RadzenImage Path="@data.Photo" class="rz-gravatar" />
            </Template>
        </RadzenDataGridColumn>
        <RadzenDataGridColumn TItem="Employee" Property="FirstName" Title="First Name" />
        <RadzenDataGridColumn TItem="Employee" Property="LastName" Title="Last Name"/>
        <RadzenDataGridColumn TItem="Employee" Property="Title" Title="Title" Width="200px" />
        <RadzenDataGridColumn TItem="Employee" Property="Notes" Title="Notes" Width="400px" />

        <RadzenDataGridColumn TItem="Employee" Filterable="false" Sortable="false" TextAlign="TextAlign.Center" Width="101px" Pickable=@false title="Edit">
            <Template Context="item">
                <RadzenButton Text="edit" ButtonStyle="ButtonStyle.Primary" Click="@(_ => grid.EditRow(item))"/>
            </Template>
            <EditTemplate Context="item">
                <RadzenButton Text="cancel" ButtonStyle="ButtonStyle.Secondary" Click="@(_ => grid.CancelEditRow(item))"/>
            </EditTemplate>
        </RadzenDataGridColumn>

    </Columns>
</RadzenDataGrid>

<EventConsole @ref=@console />

@code {
    bool? allGroupsExpanded;
    RadzenDataGrid<Employee> grid;

    EventConsole console;
    IEnumerable<Employee> employees;

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

        employees = dbContext.Employees;
    }

    void OnRender(DataGridRenderEventArgs<Employee> args)
    {
        if(args.FirstRender)
        {
            args.Grid.Groups.Add(new GroupDescriptor(){ Property = "Title", SortOrder = SortOrder.Descending });
            StateHasChanged();
        }
    }

    void ToggleGroups(bool? value)
    {
        allGroupsExpanded = value;
    }

    void OnGroupRowRender(GroupRowRenderEventArgs args)
    {
        if (args.FirstRender && args.Group.Data.Key == "Vice President, Sales" || allGroupsExpanded != null)
        {
            args.Expanded = allGroupsExpanded != null ? allGroupsExpanded : false;
        }
    }

    void OnGroupRowExpand(Group group)
    {
        console.Log($"Group row with key: {group.Data.Key} expanded");
    }

    void OnGroupRowCollapse(Group group)
    {
        console.Log($"Group row with key: {group.Data.Key} collapsed");
    }

    void OnGroup(DataGridColumnGroupEventArgs<Employee> args)
    {
        console.Log($"DataGrid {(args.GroupDescriptor != null ? "grouped" : "ungrouped")} by {args.Column.GetGroupProperty()}");
    }
}

This fix reinstates a condition that was in place before #989: https://github.com/radzenhq/radzen-blazor/pull/989/files#diff-7ad12b64ebe222b4a5a33c2735cbd89d58bac88807d49ffb3c5a23ffb41357a8L1863
Test ran and all passed locally.


🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/radzenhq/radzen-blazor/pull/1265 **Author:** [@liam-gray](https://github.com/liam-gray) **Created:** 11/30/2023 **Status:** ✅ Merged **Merged:** 11/30/2023 **Merged by:** [@enchev](https://github.com/enchev) **Base:** `master` ← **Head:** `master` --- ### 📝 Commits (1) - [`1921acc`](https://github.com/radzenhq/radzen-blazor/commit/1921acc04e0d7750ff3a905081f1ab96ac1c2d24) Stop all groups collapsing when switching to and from edit mode ### 📊 Changes **1 file changed** (+4 additions, -1 deletions) <details> <summary>View changed files</summary> 📝 `Radzen.Blazor/RadzenDataGrid.razor.cs` (+4 -1) </details> ### 📄 Description Under these conditions, when switching to or from edit mode, all groups revert to collapsed state: - Grouping is active - Editing is enabled (EditRow / CancelEditRow can be triggered by the user) - AllGroupsExpanded is set to false (such that groups are initially collapsed) In version 4.11.2 and earlier, groups would retain their collapsed/expanded state when switching to or from edit mode, following the merge of #989 in 4.12.0, all groups become collapsed. Reproducible in the demo pages by pasting the following grid setup (slightly modified version of the Grouping API https://blazor.radzen.com/datagrid-grouping-api demo to add editing and set AllGroupsExpanded to false) ``` @using RadzenBlazorDemos.Data @using RadzenBlazorDemos.Models.Northwind @using Microsoft.EntityFrameworkCore @inherits DbContextPage <div style="display: flex; align-items: center; margin-bottom: 16px"> <RadzenCheckBox TriState="true" TValue="bool?" @bind-Value="@allGroupsExpanded" Name="allGroupsExpanded" Change="@ToggleGroups" /> <RadzenLabel Text="All groups expanded by default" Component="allGroupsExpanded" Style="margin-left: 8px; margin-right: 32px; vertical-align: middle;" /> <RadzenButton Text="Expand all groups" Click="@(args => ToggleGroups(true))" style="margin-right: 16px" Disabled=@(allGroupsExpanded == true) /> <RadzenButton Text="Collapse all groups" Click="@(args => ToggleGroups(false))" Disabled=@(allGroupsExpanded == false) /> </div> <RadzenDataGrid @ref=grid AllowGrouping="true" AllowFiltering="true" AllowColumnResize="true" FilterMode="FilterMode.Advanced" PageSize="5" AllowPaging="true" AllowSorting="true" Data="@employees" TItem="Employee" ColumnWidth="160px" LogicalFilterOperator="LogicalFilterOperator.Or" Render="@OnRender" HideGroupedColumn="true" AllGroupsExpanded=@false EditMode="DataGridEditMode.Single"> <Columns> <RadzenDataGridColumn TItem="Employee" Property="EmployeeID" Filterable="false" Title="ID" Frozen="true" Width="80px" TextAlign="TextAlign.Center" /> <RadzenDataGridColumn TItem="Employee" Title="Photo" Sortable="false" Filterable="false" Frozen="true" Groupable="false" Width="80px" TextAlign="TextAlign.Center" > <Template Context="data"> <RadzenImage Path="@data.Photo" class="rz-gravatar" /> </Template> </RadzenDataGridColumn> <RadzenDataGridColumn TItem="Employee" Property="FirstName" Title="First Name" /> <RadzenDataGridColumn TItem="Employee" Property="LastName" Title="Last Name"/> <RadzenDataGridColumn TItem="Employee" Property="Title" Title="Title" Width="200px" /> <RadzenDataGridColumn TItem="Employee" Property="Notes" Title="Notes" Width="400px" /> <RadzenDataGridColumn TItem="Employee" Filterable="false" Sortable="false" TextAlign="TextAlign.Center" Width="101px" Pickable=@false title="Edit"> <Template Context="item"> <RadzenButton Text="edit" ButtonStyle="ButtonStyle.Primary" Click="@(_ => grid.EditRow(item))"/> </Template> <EditTemplate Context="item"> <RadzenButton Text="cancel" ButtonStyle="ButtonStyle.Secondary" Click="@(_ => grid.CancelEditRow(item))"/> </EditTemplate> </RadzenDataGridColumn> </Columns> </RadzenDataGrid> <EventConsole @ref=@console /> @code { bool? allGroupsExpanded; RadzenDataGrid<Employee> grid; EventConsole console; IEnumerable<Employee> employees; protected override async Task OnInitializedAsync() { await base.OnInitializedAsync(); employees = dbContext.Employees; } void OnRender(DataGridRenderEventArgs<Employee> args) { if(args.FirstRender) { args.Grid.Groups.Add(new GroupDescriptor(){ Property = "Title", SortOrder = SortOrder.Descending }); StateHasChanged(); } } void ToggleGroups(bool? value) { allGroupsExpanded = value; } void OnGroupRowRender(GroupRowRenderEventArgs args) { if (args.FirstRender && args.Group.Data.Key == "Vice President, Sales" || allGroupsExpanded != null) { args.Expanded = allGroupsExpanded != null ? allGroupsExpanded : false; } } void OnGroupRowExpand(Group group) { console.Log($"Group row with key: {group.Data.Key} expanded"); } void OnGroupRowCollapse(Group group) { console.Log($"Group row with key: {group.Data.Key} collapsed"); } void OnGroup(DataGridColumnGroupEventArgs<Employee> args) { console.Log($"DataGrid {(args.GroupDescriptor != null ? "grouped" : "ungrouped")} by {args.Column.GetGroupProperty()}"); } } ``` This fix reinstates a condition that was in place before #989: https://github.com/radzenhq/radzen-blazor/pull/989/files#diff-7ad12b64ebe222b4a5a33c2735cbd89d58bac88807d49ffb3c5a23ffb41357a8L1863 Test ran and all passed locally. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
claunia added the pull-request label 2026-01-29 18:19:46 +00:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#2635