978251: Update UG Documentation for PersistGroupState feature

[BarathAravindKannan]

Feature description

Create UG Documentation for following support.
Support to maintain expand/collapse state of Groups in Grid during certain actions like Sorting, Filtering, Paging, CRUD operations.
UG Task link : https://dev.azure.com/EssentialStudio/Ej2-Web/_workitems/edit/978251
Feature implemenation Task URL: https://dev.azure.com/EssentialStudio/Ej2-Web/_workitems/edit/968776

List of PRs for the support given:
Core concept : https://gitea.syncfusion.com/essential-studio/ej2-blazor-source/pulls/24168
Covered methods : https://gitea.syncfusion.com/essential-studio/ej2-blazor-source/pulls/24538
Revamped by avoiding pagewise persistence : https://gitea.syncfusion.com/essential-studio/ej2-blazor-source/pulls/24837
API And XML - https://gitea.syncfusion.com/essential-studio/ej2-blazor-source/pulls/24887
Reset on dynamic change of prop - https://gitea.syncfusion.com/essential-studio/ej2-blazor-source/pulls/24923
Playwright - https://gitea.syncfusion.com/essential-studio/blazor-grid-playwright-tests/pulls/1414

Preview for documentation part:

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 property to true. This also applies when using external grouping methods like ExpandAllGroupAsync and 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

Enable or disable grouped row state persistence

<SfGrid @ref="Grid" DataSource="@griddata" AllowGrouping="true" Height="315px" AllowSorting="true">

@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<bool?> 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<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" %}

[SyncfusionBuild]

Build Status: INQUEUE 🕒
Build Location: 978251-PersistGroupState

[SyncfusionBuild]

Build Status: INPROGRESS 🔃
Build Location: 978251-PersistGroupState

[SyncfusionBuild]

CI Status: SUCCESS ✅
Source Compilation: SUCCESS ✅
Build Location: 978251-PersistGroupState
Technical Error(s): 0
Spelling Error(s): 0
Image Alt Text Error(s): 0
Image Size Error(s): 0
Image Name Error(s): 0
Front matter Error(s): 0
File Path Error(s): 0
CodeSnippet File Path Missing Error(s): 0
Toc Anchor Tags Validation Error(s): 0
MD Tag Validation Error(s): 0

[dhivyasyncfusion]

Hi @barath, Changes are fine