Merge pull request #6568 from syncfusion-content/978251-PersistGroupState

978251: Update UG Documentation for PersistGroupState feature

Author: dhivyasyncfusion

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

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
+
+<div style="display:flex;gap: 5px;">
+    <label> Enable or disable grouped row state persistence</label>
+    <SfSwitch OffLabel="OFF" OnLabel="ON" ValueChange="Change" TChecked="bool?"></SfSwitch>
+</div>
+
+<SfGrid @ref="Grid" DataSource="@GridData" AllowGrouping="true" Height="315px" AllowSorting="true">
+    <GridGroupSettings Columns="@Initial" PersistGroupState=@IsPersist></GridGroupSettings>
+    <GridColumns>
+        <GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="90"></GridColumn>
+        <GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="100"></GridColumn>
+        <GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="100"></GridColumn>
+        <GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="120"></GridColumn>
+    </GridColumns>
+</SfGrid>
+
+@code {
+    public List<OrderData> GridData { get; set; }
+    SfGrid<OrderData>? 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<bool?> args)
+    {
+        if (args.Checked == true)
+        {
+            IsPersist = true;
+        }
+        else
+        {
+            IsPersist = false;
+        }
+    }
+}
+
+{% endhighlight %}
+
+{% highlight c# tabtitle="OrderData.cs" %}
+
+public class OrderData
+{
+    public static List<OrderData> Orders = new List<OrderData>();  
+    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<OrderData> 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.