940678: Added the topic of Observables binding with state persistence

ej2-asp-core-mvc/code-snippet/grid/state-persist/observable/observable.cs

@@ -0,0 +1,5 @@
+public IActionResult Index()
+{
+    ViewBag.dataSource = OrderDetails.GetAllRecords();;            
+    return View();
+}

ej2-asp-core-mvc/code-snippet/grid/state-persist/observable/razor

@@ -0,0 +1,52 @@
+@{
+    List<object> filterColumns = new List<object>();
+    filterColumns.Add(new { field = "CustomerID", matchCase = false, @operator = "startswith", predicate = "and", value = "A" });
+}
+@{
+    List<object> sortOptions = new List<object>();
+    sortOptions.Add(new { field = "OrderID", direction = "Descending" });
+}
+@Html.EJS().Grid("grid").AllowPaging(true).AllowFiltering(true).AllowSorting(true).AllowGrouping(true).EnablePersistence(true).Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("CustomerID").HeaderText("Customer Name").Width("170").Add();
+    col.Field("ShipCity").HeaderText("ShipCity").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("ShipName").HeaderText("Ship Name").Width("170").Add();
+}).Created("created").DataStateChange("dataStateChange").GroupSettings(group => { group.ShowGroupedColumn(false).Columns(new string[] { "ShipCity" }); }).FilterSettings(filter => filter.Columns(filterColumns)).SortSettings(sort => sort.Columns(sortOptions)).PageSettings(page => page.PageCount(10)).Render()
+<script>
+    function created() {
+        const grid = document.getElementById("grid").ej2_instances[0];
+        const query = grid.getDataModule().generateQuery();
+        const state = ej.grids.getStateEventArgument(query);
+        dataStateChange(state);
+    }
+    function dataStateChange(state) {
+        const grid = document.getElementById("grid").ej2_instances[0];
+        getData(state).then((data) => (grid.dataSource = data));
+    }
+    async function getData(state) {
+        const BASE_URL ='https://services.odata.org/V4/Northwind/Northwind.svc/Orders';
+        const pageQuery = `$skip=${state.skip}&$top=${state.take}`;
+        let sortQuery = '';
+        let filterQuery = '';
+        if ((state.sorted || []).length) {
+            sortQuery =`&$orderby=` + state.sorted.map((obj) =>
+                obj.direction === 'descending' ? `${obj.name} desc` : obj.name
+            ).reverse().join(',');
+        }
+        if (state.where) {
+            filterQuery =`&$filter=` + state.where.map((obj) => {
+                return obj.predicates.map((predicate) => {
+                    return predicate.operator === 'equal'? `${predicate.field} eq ${predicate.value}`: `${predicate.operator}(tolower(${predicate.field}),'${predicate.value}')`;
+                }).reverse().join(' and ');
+            });
+        }
+        const request = `${BASE_URL}?${pageQuery}${sortQuery}${filterQuery}&$count=true`;
+        const response = await fetch(request);
+        const data = await response.json();
+        return {
+            result: data['value'],
+            count: parseInt(data['@@odata.count'], 10),
+        };
+    }
+</script>

ej2-asp-core-mvc/code-snippet/grid/state-persist/observable/tagHelper

@@ -0,0 +1,57 @@
+@{
+    List<object> filterColumns = new List<object>();
+    filterColumns.Add(new { field = "CustomerID", matchCase = false, @operator = "startswith", predicate = "and", value = "A" });
+}
+@{
+    List<object> sortOptions = new List<object>();
+    sortOptions.Add(new { field = "OrderID", direction = "Decending" });
+ }
+<ejs-grid id="grid" allowPaging='true' allowFiltering="true" allowSorting="true" allowGrouping="true" created="created" dataStateChange="dataStateChange" enablePersistence="true"> 
+    <e-grid-pagesettings pageSize="12", currentPage="2"></e-grid-pagesettings>
+    <e-grid-filterSettings columns="filterColumns"></e-grid-filterSettings>
+    <e-grid-sortsettings columns="sortOptions"></e-grid-sortsettings>
+    <e-grid-groupsettings columns="@(new string[] {"ShipCity"})"></e-grid-groupsettings>
+    <e-grid-columns>
+        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>
+        <e-grid-column field="CustomerID" headerText="Customer Name" width="150" ></e-grid-column>
+        <e-grid-column field="ShipCity" headerText="ShipCity" width="150"></e-grid-column>
+        <e-grid-column field="ShipName" headerText="Ship Name" width="150" ></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>
+<script>
+    function created() {
+        const grid = document.getElementById("grid").ej2_instances[0];
+        const query = grid.getDataModule().generateQuery();
+        const state = ej.grids.getStateEventArgument(query);
+        dataStateChange(state);
+    }
+    function dataStateChange(state) {
+        const grid = document.getElementById("grid").ej2_instances[0];
+        getData(state).then((data) => (grid.dataSource = data));
+    }
+    async function getData(state) {
+        const BASE_URL ='https://services.odata.org/V4/Northwind/Northwind.svc/Orders';
+        const pageQuery = `$skip=${state.skip}&$top=${state.take}`;
+        let sortQuery = '';
+        let filterQuery = '';
+        if ((state.sorted || []).length) {
+            sortQuery =`&$orderby=` + state.sorted.map((obj) =>
+                obj.direction === 'descending' ? `${obj.name} desc` : obj.name
+            ).reverse().join(',');
+        }
+        if (state.where) {
+            filterQuery =`&$filter=` + state.where.map((obj) => {
+                return obj.predicates.map((predicate) => {
+                    return predicate.operator === 'equal'? `${predicate.field} eq ${predicate.value}`: `${predicate.operator}(tolower(${predicate.field}),'${predicate.value}')`;
+                }).reverse().join(' and ');
+            });
+        }
+        const request = `${BASE_URL}?${pageQuery}${sortQuery}${filterQuery}&$count=true`;
+        const response = await fetch(request);
+        const data = await response.json();
+        return {
+            result: data['value'],
+            count: parseInt(data['@@odata.count'], 10),
+        };
+    }
+</script>

ej2-asp-core-mvc/grid/EJ2_ASP.MVC/state-management.md

@@ -1,6 +1,6 @@
 ---
 layout: post
-title: State management in ##Platform_Name## Grid Component
+title: State management in Syncfusion ##Platform_Name## Grid Component
 description: Learn here all about State management in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more.
 platform: ej2-asp-core-mvc
 control: State management
@@ -130,6 +130,30 @@ When [EnablePersistence](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion
 {% endhighlight %}
 {% endtabs %}
 
+## Observables binding with state persistence
+
+The Syncfusion Grid supports state persistence when using observable binding, ensuring that the Grid retains its state across sessions. This is useful when dealing with real-time data updates or asynchronous data sources while preserving user interactions such as sorting, filtering, paging, and grouping.
+
+To implement state persistence with observables, the initial query state must be manually handled. This involves:
+
+    * Retrieving the initial query using the Grid’s `getDataModule` method with `generateQuery`.
+
+    * Obtaining the state from the query via `getStateEventArgument` method.
+
+    * Sending the retrieved state to the service to fetch data accordingly.
+
+Except for the initial render, state persistence ensures that manually performed actions are retained by storing the state in the browser’s `localStorage`, allowing it to persist across page reloads. The following example demonstrates how to use the [created](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_Created) event to send the persisted state to the service at initial render:
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/grid/state-persist/observable/razor %}
+{% endhighlight %}
+
+{% highlight c# tabtitle="observable.cs" %}
+{% include code-snippet/grid/state-persist/observable/observable.cs %}
+{% endhighlight %}
+{% endtabs %}
+
 ## Get or set local storage value
 
 If the [EnablePersistence](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_EnablePersistence) property is set to **true**, the Grid property value is saved in the **window.localStorage** for reference. You can get or set the localStorage value by using the **getItem** and **setItem** methods in **window.localStorage**.

ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/state-management.md

@@ -1,6 +1,6 @@
 ---
 layout: post
-title: State management in ##Platform_Name## Grid Component
+title: State management in Syncfusion ##Platform_Name## Grid Component
 description: Learn here all about State management in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more.
 platform: ej2-asp-core-mvc
 control: State management
@@ -130,6 +130,30 @@ When [enablePersistence](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusio
 {% endhighlight %}
 {% endtabs %}
 
+## Observables binding with state persistence
+
+The Syncfusion Grid supports state persistence when using observable binding, ensuring that the Grid retains its state across sessions. This is useful when dealing with real-time data updates or asynchronous data sources while preserving user interactions such as sorting, filtering, paging, and grouping.
+
+To implement state persistence with observables, the initial query state must be manually handled. This involves:
+
+    * Retrieving the initial query using the Grid’s `getDataModule` method with `generateQuery`.
+
+    * Obtaining the state from the query via `getStateEventArgument` method.
+
+    * Sending the retrieved state to the service to fetch data accordingly.
+
+Except for the initial render, state persistence ensures that manually performed actions are retained by storing the state in the browser’s `localStorage`, allowing it to persist across page reloads. The following example demonstrates how to use the [created](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_Created) event to send the persisted state to the service at initial render:
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/state-persist/observable/tagHelper %}
+{% endhighlight %}
+
+{% highlight c# tabtitle="observable.cs" %}
+{% include code-snippet/grid/state-persist/observable/observable.cs %}
+{% endhighlight %}
+{% endtabs %}
+
 ## Get or set local storage value
 
 If the [enablePersistence](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_EnablePersistence) property is set to **true**, the Grid property value is saved in the **window.localStorage** for reference. You can get or set the localStorage value by using the **getItem** and **setItem** methods in **window.localStorage**.