From 02f063154bad9ecf46321bd597b4fbc3812311f6 Mon Sep 17 00:00:00 2001
From: vikramsundarajan <129823420+vikramsundarajan@users.noreply.github.com>
Date: Mon, 24 Mar 2025 18:55:02 +0530
Subject: [PATCH 1/2] 940678: Added the topic of Observables binding with state
 persistence

---
 .../state-persist/observable/observable.cs    |  5 ++
 .../grid/state-persist/observable/razor       | 52 +++++++++++++++++
 .../grid/state-persist/observable/tagHelper   | 57 +++++++++++++++++++
 .../grid/EJ2_ASP.MVC/state-management.md      | 24 ++++++++
 .../grid/EJ2_ASP.NETCORE/state-management.md  | 24 ++++++++
 5 files changed, 162 insertions(+)
 create mode 100644 ej2-asp-core-mvc/code-snippet/grid/state-persist/observable/observable.cs
 create mode 100644 ej2-asp-core-mvc/code-snippet/grid/state-persist/observable/razor
 create mode 100644 ej2-asp-core-mvc/code-snippet/grid/state-persist/observable/tagHelper

diff --git a/ej2-asp-core-mvc/code-snippet/grid/state-persist/observable/observable.cs b/ej2-asp-core-mvc/code-snippet/grid/state-persist/observable/observable.cs
new file mode 100644
index 0000000000..90ebfcc865
--- /dev/null
+++ b/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();
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/state-persist/observable/razor b/ej2-asp-core-mvc/code-snippet/grid/state-persist/observable/razor
new file mode 100644
index 0000000000..469ae3a731
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/state-persist/observable/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/state-persist/observable/tagHelper
new file mode 100644
index 0000000000..7d0afa5c97
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/state-management.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/state-management.md
index 2371c4be8c..1ec111e8de 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/state-management.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/state-management.md
@@ -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**.
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/state-management.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/state-management.md
index 181ed59c9d..7b10feab21 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/state-management.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/state-management.md
@@ -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**.

From 71ddba5ec53ed1e7886ebc3c427c9f564ddde75a Mon Sep 17 00:00:00 2001
From: vikramsundarajan <129823420+vikramsundarajan@users.noreply.github.com>
Date: Mon, 24 Mar 2025 19:08:15 +0530
Subject: [PATCH 2/2] 940687: Added the Syncfusion word in title

---
 ej2-asp-core-mvc/grid/EJ2_ASP.MVC/state-management.md     | 2 +-
 ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/state-management.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/state-management.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/state-management.md
index 1ec111e8de..0bf6a8ab32 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/state-management.md
+++ b/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
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/state-management.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/state-management.md
index 7b10feab21..4bba926d68 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/state-management.md
+++ b/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