From 1cffbef5eafdcf1fa0ad0cdfa1f3629654514597 Mon Sep 17 00:00:00 2001 From: Barath Aravind K Date: Wed, 10 Sep 2025 22:07:55 +0530 Subject: [PATCH] 978251: Update UG Documentation for PersistGroupState feature --- blazor/datagrid/caption-template.md | 2 +- blazor/datagrid/grouping.md | 105 +++++++++++++++++++++++++++- 2 files changed, 105 insertions(+), 2 deletions(-) diff --git a/blazor/datagrid/caption-template.md b/blazor/datagrid/caption-template.md index d00692d16d..7f13ec8cce 100644 --- a/blazor/datagrid/caption-template.md +++ b/blazor/datagrid/caption-template.md @@ -1,7 +1,7 @@ --- layout: post title: Caption template in Blazor DataGrid | Syncfusion -description: Checkout and learn here all about Grouping in Syncfusion Blazor DataGrid and much more details. +description: Checkout and learn here all about Caption Template in Syncfusion Blazor DataGrid and much more details. platform: Blazor control: DataGrid documentation: ug diff --git a/blazor/datagrid/grouping.md b/blazor/datagrid/grouping.md index e0cf85e5ba..e040402123 100644 --- a/blazor/datagrid/grouping.md +++ b/blazor/datagrid/grouping.md @@ -1,7 +1,7 @@ --- layout: post title: Grouping in Blazor DataGrid | Syncfusion -description: Checkout and learn here all about Grouping in Syncfusion Blazor DataGrid and much more details. +description: Checkout and learn here all about Grouping in Syncfusion Blazor DataGrid component and much more details. platform: Blazor control: DataGrid documentation: ug @@ -466,6 +466,109 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/rtLqCCBPUOxoyWyr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +## Persist grouped row expand or collapse state + +The Syncfusion Blazor DataGrid offers the ability to persist the expand or collapse state of grouped rows across various data operations such as paging, sorting, filtering, and editing. By default, these operations reset the grouped rows to their initial collapsed or expanded state. +To retain the current state of grouped rows and ensure a consistent user experience, set the [GridGroupSettings.PersistGroupState](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html#Syncfusion_Blazor_Grids_GridGroupSettings_PersistGroupState) property to **true**. This also applies when using external grouping methods like [ExpandAllGroupAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExpandAllGroupAsync) and [CollapseAllGroupAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CollapseAllGroupAsync). + +The following example demonstrates how to dynamically enable or disable the `PersistGroupState` property in the DataGrid. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons + +
+ + +
+ + + + + + + + + + + +@code { + public List GridData { get; set; } + SfGrid? Grid { get; set; } + + private bool IsPersist { get; set; } = true; + private string[] Initial = (new string[] { "CustomerID", "ShipCity" }); + + protected override void OnInitialized() + { + GridData = OrderData.GetAllRecords(); + } + + private async Task Change(Syncfusion.Blazor.Buttons.ChangeEventArgs args) + { + if (args.Checked == true) + { + IsPersist = true; + } + else + { + IsPersist = false; + } + } +} + +{% endhighlight %} + +{% highlight c# tabtitle="OrderData.cs" %} + +public class OrderData +{ + public static List Orders = new List(); + public OrderData(){} + + public OrderData(int? OrderID, string CustomerID, string ShipCity, string ShipName) + { + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.ShipCity = ShipCity; + this.ShipName = ShipName; + } + + public static List GetAllRecords() + { + if (Orders.Count() == 0) + { + int code = 10; + for (int i = 1; i < 2; i++) + { + Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); + Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); + Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); + Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); + code += 5; + } + } + return Orders; + } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNroDvrRpDAvxclV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ## Sort grouped columns in descending order during initial grouping By default, grouped columns are sorted in ascending order. However, you can sort them in descending order during initial grouping by setting the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortColumn.html#Syncfusion_Blazor_Grids_GridSortColumn_Field) and [Direction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortColumn.html#Syncfusion_Blazor_Grids_GridSortColumn_Direction) in the `GridSortSettings` of the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html#Syncfusion_Blazor_Grids_GridSortSettings_Columns) property.