From 5e3303edd4d728c6e13980dfcf051c0107a1eb05 Mon Sep 17 00:00:00 2001 From: Gayathri4135 Date: Wed, 23 Apr 2025 10:22:40 +0530 Subject: [PATCH 1/7] Documentation(953042) - Revamp the state-management in blazor platform. --- blazor/datagrid/state-management.md | 325 ++++++++++++++++++++++++++++ 1 file changed, 325 insertions(+) diff --git a/blazor/datagrid/state-management.md b/blazor/datagrid/state-management.md index abd4c89971..fc7451617f 100644 --- a/blazor/datagrid/state-management.md +++ b/blazor/datagrid/state-management.md @@ -7,6 +7,331 @@ control: DataGrid documentation: ug --- +# State Management in Blazor DataGrid + +State management in the Grid allows you to maintain the Grid's state even after a browser refresh or when navigating to a different page within the same browser session. This feature is particularly useful for retaining the grid's configuration and data even after a page reload. + +To enable state persistence in the Grid, you can utilize the [EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnablePersistence) property. When this property is set to **true**, the grid will automatically save its state in the browser's [LocalStorage](https://www.w3schools.com/html/html5_webstorage.asp#), ensuring that the state is preserved across page reloads. + +```cshtml + +``` + +> The grid will store the state using the combination of the component name and component ID in the storage. For example, if the component name is **grid** and the ID is **OrderDetails**, the state will be stored as **gridOrderDetails**. + + +When enabling state persistence, the following grid settings will persist in the local storage. + +| Grid Settings | Properties persist | Ignored properties | +| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| PageSettings | CurrentPage
PageCount
PageSize
PageSizes | Template
EnableQueryString | +| GroupSettings | AllowReordering
Columns
DisablePageWiseAggregates
EnableLazyLoading
ShowDropArea
ShowGroupedColumn
ShowToggleButton
ShowUngroupButton | CaptionTemplate | +| Columns | AllowEditing
AllowFiltering
AllowGrouping
AllowReordering
AllowResizing
AllowSearching
AllowSorting
AutoFit
DisableHtmlEncode
EnableGroupByFormat
Field
ForeignKeyField
Index
ShowColumnMenu
ShowInColumnChooser
Type
Uid
Visible
Width | ClipMode
Commands
CustomAttributes
DataSource
DefaultValue
DisplayAsCheckBox
Edit
EditTemplate
EditType
Filter
filterItemTemplate
FilterTemplate
ForeignKeyValue
Format
Freeze
HeaderTemplate
HeaderText
HeaderTextAlign
HeaderValueAccessor
HideAtMedia
IsFrozen
IsIdentity
IsPrimaryKey
MaxWidth
MinWidth
SortComparer
Template
TextAlign
ValidationRules | +| SortSettings | - | - | +| FilterSettings | - | - | +| SearchSettings | - | - | +| SelectedRowIndex | - | - | + + +The grid will persist only the last selected row index. + +## Restore initial Grid state + +In the Syncfusion Blazor Grid, you have the capability to restore the grid to its initial state, reverting all changes and configurations made during the interaction. This feature can be particularly useful when you want to reset the grid to its original settings, eliminating any applied filters, sorting, or column reordering. + +Here are the steps to reset the grid to its initial state, even when the [EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnablePersistence) property is enabled: + +You can use [ResetPersistData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ResetPersistData) method to reset grid state to its original state. This will clear persisted data in window local storage and renders grid with its original property values. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons + +Restore Grid State + + + + + + + + + + +@code { + private SfGrid Grid; + public List Orders { get; set; } + + public string _state; + protected override void OnInitialized() + { + Orders = OrderData.GetAllRecords(); + } +} + +{% endhighlight %} + +{% highlight c# tabtitle="OrderData.cs" %} + +public class OrderData +{ + public static List Orders = new List(); + + public OrderData(int orderID, string customerID, double freight, string shipCity) + { + this.OrderID = orderID; + this.CustomerID = customerID; + this.Freight = freight; + this.ShipCity = shipCity; + } + + public static List GetAllRecords() + { + if (Orders.Count == 0) + { + Orders.Add(new OrderData(10248, "VINET", 32.38, "Reims")); + Orders.Add(new OrderData(10249, "TOMSP", 11.61, "Münster")); + Orders.Add(new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro")); + Orders.Add(new OrderData(10251, "VICTE", 41.34, "Lyon")); + Orders.Add(new OrderData(10252, "SUPRD", 51.3, "Charleroi")); + Orders.Add(new OrderData(10253, "HANAR", 58.17, "Rio de Janeiro")); + Orders.Add(new OrderData(10254, "CHOPS", 22.98, "Bern")); + Orders.Add(new OrderData(10255, "RICSU", 148.33, "Genève")); + Orders.Add(new OrderData(10256, "WELLI", 13.97, "Resende")); + Orders.Add(new OrderData(10257, "HILAA", 81.91, "San Cristóbal")); + Orders.Add(new OrderData(10258, "ERNSH", 140.51, "Graz")); + Orders.Add(new OrderData(10259, "CENTC", 3.25, "México D.F.")); + Orders.Add(new OrderData(10260, "OTTIK", 55.09, "Köln")); + Orders.Add(new OrderData(10261, "QUEDE", 3.05, "Rio de Janeiro")); + Orders.Add(new OrderData(10262, "RATTC", 48.29, "Albuquerque")); + } + + return Orders; + } + + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double Freight { get; set; } + public string ShipCity { get; set; } +} +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrKsMZhrntSJwyp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +### Clearing local storage + +Another method to reset the grid is by clearing the local storage associated with the grid component. This action removes any stored state information, allowing the grid to return to its original configuration. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons +@inject IJSRuntime JS +Restore Grid State + + + + + + + + +@code { + private SfGrid Grid; + + public List Orders { get; set; } + + protected override void OnInitialized() + { + Orders = OrderDetails.GetAllRecords(); + } + + private async Task RestoreGridState() + { + await Grid.ResetPersistDataAsync(); + await JS.InvokeVoidAsync("localStorage.setItem", "Grid", ""); // "Grid" = ID used in SfGrid. + await JS.InvokeVoidAsync("location.reload"); + } +} + +{% endhighlight %} + +{% highlight c# tabtitle="OrderDetails.cs" %} + +public class OrderDetails +{ + public static List order = new List(); + public OrderDetails(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 (order.Count == 0) + { + order.Add(new OrderDetails(10248, "VINET", "Reims", "Vins et alcools Chevalier")); + order.Add(new OrderDetails(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + order.Add(new OrderDetails(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + order.Add(new OrderDetails(10251, "VICTE", "Lyon", "Victuailles en stock")); + order.Add(new OrderDetails(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + order.Add(new OrderDetails(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + order.Add(new OrderDetails(10254, "CHOPS", "Bern", "Chop-suey Chinese")); + order.Add(new OrderDetails(10255, "RICSU", "Genève", "Richter Supermarkt")); + order.Add(new OrderDetails(10256, "WELLI", "Resende", "Wellington Importadora")); + order.Add(new OrderDetails(10257, "HILAA", "San Cristóbal", "HILARION-Abastos")); + order.Add(new OrderDetails(10258, "ERNSH", "Graz", "Ernst Handel")); + order.Add(new OrderDetails(10259, "CENTC", "México D.F.", "Centro comercial Moctezuma")); + order.Add(new OrderDetails(10260, "OTTIK", "Köln", "Ottilies Käseladen")); + order.Add(new OrderDetails(10261, "QUEDE", "Rio de Janeiro", "Que Delícia")); + order.Add(new OrderDetails(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery")); + } + return order; + } + 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/LtVItfhCIjLifBTr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Restore to specific state version + +Syncfusion Blazor Grid supports state persistence, allowing to save and restore grid configurations such as column settings, filters, sorting, grouping, paging, and more. This example demonstrates how to implement version-based state persistence using localStorage. + +In this sample, each version represents a unique saved grid configuration (or state). When a version button is clicked: + +1. The current grid state is saved to localStorage using the existing version key. + +2. The grid switches to the selected version. + +3. If persisted data exists for the selected version, it is applied to the grid. + +4. If no data is found, a new state will be stored the next time the grid is modified. + +To implement version-based persistence in Syncfusion Blazor Grid, first add the necessary components: use `SfGrid` to display the data and `SfButton` components to allow users to select different version states. The grid's **PersistenceKey** is set dynamically based on the selected version (e.g., gridOrderDetails_v.1), ensuring each version maintains a unique state in localStorage. The core logic for switching versions is handled in the `ChangeVersion` method. This method saves the current grid state using [GetPersistDataAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetPersistDataAsync) before switching versions. It then attempts to load the state associated with the selected version using [SetPersistDataAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SetPersistDataAsync_System_String_). If a persisted state is available, it is applied to the grid; otherwise, a message is displayed indicating that no saved state exists and a new state will be stored going forward. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons +@inject IJSRuntime JS + +
+ Version 1 + Version 2 + Version 3 +
+
+ @Message +
+@if (!string.IsNullOrEmpty(CurrentVersion)) +{ + + + + + + + +} +@code { +private SfGrid Grid; +public List Orders { get; set; } +public string CurrentVersion { get; set; } = "v.0"; +public string Message { get; set; } +protected override void OnInitialized() +{ + Orders = OrderDetails.GetAllRecords(); +} + + private async Task ChangeVersion(string version) + { + // Save current state to localStorage before switching. + if (Grid != null) + { + var currentData = await Grid.GetPersistDataAsync(); + await JS.InvokeVoidAsync("localStorage.setItem", $"gridOrderDetails_{CurrentVersion}", currentData); + } + + // Switch to new version. + CurrentVersion = version; + + // Load new version's data if available. + var saved = await JS.InvokeAsync("localStorage.getItem", $"gridOrderDetails_{version}"); + if (!string.IsNullOrEmpty(saved)) + { + await Grid.SetPersistDataAsync(saved); + Message = $"Grid state restored to {version}"; + } + else + { + Message = $"No saved state found for {version}. New state will be stored."; + } + + StateHasChanged(); + } + +} + +{% endhighlight %} + +{% highlight c# tabtitle="OrderDetails.cs" %} + +public class OrderDetails +{ + public static List order = new List(); + public OrderDetails(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 (order.Count == 0) + { + order.Add(new OrderDetails(10248, "VINET", "Reims", "Vins et alcools Chevalier")); + order.Add(new OrderDetails(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + order.Add(new OrderDetails(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + order.Add(new OrderDetails(10251, "VICTE", "Lyon", "Victuailles en stock")); + order.Add(new OrderDetails(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + order.Add(new OrderDetails(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + order.Add(new OrderDetails(10254, "CHOPS", "Bern", "Chop-suey Chinese")); + order.Add(new OrderDetails(10255, "RICSU", "Genève", "Richter Supermarkt")); + order.Add(new OrderDetails(10256, "WELLI", "Resende", "Wellington Importadora")); + order.Add(new OrderDetails(10257, "HILAA", "San Cristóbal", "HILARION-Abastos")); + order.Add(new OrderDetails(10258, "ERNSH", "Graz", "Ernst Handel")); + order.Add(new OrderDetails(10259, "CENTC", "México D.F.", "Centro comercial Moctezuma")); + order.Add(new OrderDetails(10260, "OTTIK", "Köln", "Ottilies Käseladen")); + order.Add(new OrderDetails(10261, "QUEDE", "Rio de Janeiro", "Que Delícia")); + order.Add(new OrderDetails(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery")); + } + return order; + } + 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/hZLIXJhrJGykpckS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + + # State Management in Blazor DataGrid Component State management allows users to save and load grid state. The grid will use user-provided state to render instead of its properties provided declaratively. From 5242108b4120dea90321009a4bdbeacca56f303b Mon Sep 17 00:00:00 2001 From: Gayathri4135 Date: Wed, 23 Apr 2025 15:08:03 +0530 Subject: [PATCH 2/7] Update the md file --- blazor/datagrid/state-management.md | 550 ++++++++++++++++++++++++---- 1 file changed, 475 insertions(+), 75 deletions(-) diff --git a/blazor/datagrid/state-management.md b/blazor/datagrid/state-management.md index fc7451617f..d8c1fc8372 100644 --- a/blazor/datagrid/state-management.md +++ b/blazor/datagrid/state-management.md @@ -9,18 +9,18 @@ documentation: ug # State Management in Blazor DataGrid -State management in the Grid allows you to maintain the Grid's state even after a browser refresh or when navigating to a different page within the same browser session. This feature is particularly useful for retaining the grid's configuration and data even after a page reload. +State management in the Grid allows you to maintain the Grid's state even after a browser refresh or when navigating to a different page within the same browser session. This feature is particularly useful for retaining the Grid's configuration and data even after a page reload. -To enable state persistence in the Grid, you can utilize the [EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnablePersistence) property. When this property is set to **true**, the grid will automatically save its state in the browser's [LocalStorage](https://www.w3schools.com/html/html5_webstorage.asp#), ensuring that the state is preserved across page reloads. +To enable state persistence in the Grid, you can utilize the [EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnablePersistence) property. When this property is set to **true**, the Grid will automatically save its state in the browser's [LocalStorage](https://www.w3schools.com/html/html5_webstorage.asp#), ensuring that the state is preserved across page reloads. ```cshtml ``` -> The grid will store the state using the combination of the component name and component ID in the storage. For example, if the component name is **grid** and the ID is **OrderDetails**, the state will be stored as **gridOrderDetails**. +> The Grid will store the state using the combination of the component name and component ID in the storage. For example, if the component name is **Grid** and the ID is **OrderDetails**, the state will be stored as **gridOrderDetails**. -When enabling state persistence, the following grid settings will persist in the local storage. +When enabling state persistence, the following Grid settings will persist in the local storage. | Grid Settings | Properties persist | Ignored properties | | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | @@ -33,15 +33,103 @@ When enabling state persistence, the following grid settings will persist in the | SelectedRowIndex | - | - | -The grid will persist only the last selected row index. +The Grid will persist only the last selected row index. + +## Enabling persistence in Grid + +State persistence allows the Grid to retain the current Grid state in the browser local storage for state maintenance. This action is handled through the `EnablePersistence` property which is set to false by default. When it is set to true, some properties of the Grid will be retained even after refreshing the page. + +N> The state will be persisted based on **ID** property. So, it is recommended to explicitly set the **ID** property for Grid. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids + + + + + + + + + + +@code { + private SfGrid Grid; + public List Orders { get; set; } + + protected override void OnInitialized() + { + Orders = OrderData.GetAllRecords(); + } +} + +{% endhighlight %} + +{% highlight c# tabtitle="OrderData.cs" %} + +public class OrderData +{ + public static List Orders = new List(); + + public OrderData() { } + + public OrderData(int OrderID, string CustomerID, string ShipName, double Freight, DateTime? OrderDate, DateTime? ShippedDate, bool? IsVerified, string ShipCity, string ShipCountry, int employeeID) + { + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.ShipName = ShipName; + this.Freight = Freight; + this.OrderDate = OrderDate; + this.ShippedDate = ShippedDate; + this.IsVerified = IsVerified; + this.ShipCity = ShipCity; + this.ShipCountry = ShipCountry; + this.EmployeeID = employeeID; + } + + public static List GetAllRecords() + { + if (Orders.Count == 0) + { + Orders.Add(new OrderData(10248, "VINET", "Vins et alcools Chevalier", 32.38, new DateTime(1996, 7, 4), new DateTime(1996, 08, 07), true, "Reims", "France", 1)); + Orders.Add(new OrderData(10249, "TOMSP", "Toms Spezialitäten", 11.61, new DateTime(1996, 7, 5), new DateTime(1996, 08, 07), false, "Münster", "Germany", 2)); + Orders.Add(new OrderData(10250, "HANAR", "Hanari Carnes", 65.83, new DateTime(1996, 7, 6), new DateTime(1996, 08, 07), true, "Rio de Janeiro", "Brazil", 3)); + Orders.Add(new OrderData(10251, "VINET", "Vins et alcools Chevalier", 41.34, new DateTime(1996, 7, 7), new DateTime(1996, 08, 07), false, "Lyon", "France", 1)); + Orders.Add(new OrderData(10252, "SUPRD", "Suprêmes délices", 151.30, new DateTime(1996, 7, 8), new DateTime(1996, 08, 07), true, "Charleroi", "Belgium", 2)); + Orders.Add(new OrderData(10253, "HANAR", "Hanari Carnes", 58.17, new DateTime(1996, 7, 9), new DateTime(1996, 08, 07), false, "Bern", "Switzerland", 3)); + Orders.Add(new OrderData(10254, "CHOPS", "Chop-suey Chinese", 22.98, new DateTime(1996, 7, 10), new DateTime(1996, 08, 07), true, "Genève", "Switzerland", 2)); + Orders.Add(new OrderData(10255, "VINET", "Vins et alcools Chevalier", 148.33, new DateTime(1996, 7, 11), new DateTime(1996, 08, 07), false, "Resende", "Brazil", 1)); + Orders.Add(new OrderData(10256, "HANAR", "Hanari Carnes", 13.97, new DateTime(1996, 7, 12), new DateTime(1996, 08, 07), true, "Paris", "France", 3)); + } + return Orders; + } + + public int OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipName { get; set; } + public double? Freight { get; set; } + public DateTime? OrderDate { get; set; } + public DateTime? ShippedDate { get; set; } + public bool? IsVerified { get; set; } + public string ShipCity { get; set; } + public string ShipCountry { get; set; } + public int EmployeeID { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNByDfrqqfeXQzlJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Restore initial Grid state -In the Syncfusion Blazor Grid, you have the capability to restore the grid to its initial state, reverting all changes and configurations made during the interaction. This feature can be particularly useful when you want to reset the grid to its original settings, eliminating any applied filters, sorting, or column reordering. +In the Syncfusion Blazor Grid, you have the capability to restore the Grid to its initial state, reverting all changes and configurations made during the interaction. This feature can be particularly useful when you want to reset the Grid to its original settings, eliminating any applied filters, sorting, or column reordering. -Here are the steps to reset the grid to its initial state, even when the [EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnablePersistence) property is enabled: +Here are the steps to reset the Grid to its initial state, even when the [EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnablePersistence) property is enabled: -You can use [ResetPersistData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ResetPersistData) method to reset grid state to its original state. This will clear persisted data in window local storage and renders grid with its original property values. +You can use [ResetPersistData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ResetPersistData) method to reset Grid state to its original state. This will clear persisted data in window local storage and renders Grid with its original property values. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -123,7 +211,7 @@ public class OrderData ### Clearing local storage -Another method to reset the grid is by clearing the local storage associated with the grid component. This action removes any stored state information, allowing the grid to return to its original configuration. +Another method to reset the Grid is by clearing the local storage associated with the Grid . This action removes any stored state information, allowing the Grid to return to its original configuration. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -207,19 +295,19 @@ public class OrderDetails ## Restore to specific state version -Syncfusion Blazor Grid supports state persistence, allowing to save and restore grid configurations such as column settings, filters, sorting, grouping, paging, and more. This example demonstrates how to implement version-based state persistence using localStorage. +Syncfusion Blazor Grid supports state persistence, allowing to save and restore Grid configurations such as column settings, filters, sorting, grouping, paging, and more. This example demonstrates how to implement version-based state persistence using localStorage. -In this sample, each version represents a unique saved grid configuration (or state). When a version button is clicked: +In this sample, each version represents a unique saved Grid configuration (or state). When a version button is clicked: -1. The current grid state is saved to localStorage using the existing version key. +1. The current Grid state is saved to localStorage using the existing version key. -2. The grid switches to the selected version. +2. The Grid switches to the selected version. -3. If persisted data exists for the selected version, it is applied to the grid. +3. If persisted data exists for the selected version, it is applied to the Grid. -4. If no data is found, a new state will be stored the next time the grid is modified. +4. If no data is found, a new state will be stored the next time the Grid is modified. -To implement version-based persistence in Syncfusion Blazor Grid, first add the necessary components: use `SfGrid` to display the data and `SfButton` components to allow users to select different version states. The grid's **PersistenceKey** is set dynamically based on the selected version (e.g., gridOrderDetails_v.1), ensuring each version maintains a unique state in localStorage. The core logic for switching versions is handled in the `ChangeVersion` method. This method saves the current grid state using [GetPersistDataAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetPersistDataAsync) before switching versions. It then attempts to load the state associated with the selected version using [SetPersistDataAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SetPersistDataAsync_System_String_). If a persisted state is available, it is applied to the grid; otherwise, a message is displayed indicating that no saved state exists and a new state will be stored going forward. +To implement version-based persistence in Syncfusion Blazor Grid, first add the necessary components: use `SfGrid` to display the data and `SfButton` components to allow users to select different version states. The Grid's **PersistenceKey** is set dynamically based on the selected version (e.g., gridOrderDetails_v.1), ensuring each version maintains a unique state in localStorage. The core logic for switching versions is handled in the `ChangeVersion` method. This method saves the current Grid state using [GetPersistDataAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetPersistDataAsync) before switching versions. It then attempts to load the state associated with the selected version using [SetPersistDataAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SetPersistDataAsync_System_String_). If a persisted state is available, it is applied to the Grid. otherwise, a message is displayed indicating that no saved state exists and a new state will be stored going forward. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -331,70 +419,341 @@ public class OrderDetails {% previewsample "https://blazorplayground.syncfusion.com/embed/hZLIXJhrJGykpckS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +## Restore to previous state -# State Management in Blazor DataGrid Component +The Syncfusion Blazor Grid allows you to save and restore its state using local storage. This feature is helpful when you want to preserve the current state of the Grid, such as column order, sorting, and filtering, so that you can return to your previous work or configurations. -State management allows users to save and load grid state. The grid will use user-provided state to render instead of its properties provided declaratively. +To implement this functionality, use the `getItem` and `setItem` methods for local storage, along with the Grid `setProperties` and [GetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetPersistDataAsync) methods. -Below properties can be saved and loaded into grid later. +The provided code demonstrates how to save and restore the previous state of a Syncfusion Blazor Grid using local storage. -Property| ------| -Columns | -GridFilterSettings | -GridSortSettings | -GridGroupSettings | -GridPageSettings | +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons +@inject IJSRuntime JS -## Enabling persistence in Grid +
+ Save + Restore +
-State persistence allows the Grid to retain the current grid state in the browser local storage for state maintenance. This action is handled through the `EnablePersistence` property which is set to false by default. When it is set to true, some properties of the Grid will be retained even after refreshing the page. +
+ @Message +
-N> The state will be persisted based on **ID** property. So, it is recommended to explicitly set the **ID** property for Grid. + + + + + + + + + + + + + +@code { + private SfGrid Grid { get; set; } + private string Message = string.Empty; + public List Orders { get; set; } + + protected override void OnInitialized() + { + Orders = OrderDetails.GetAllRecords(); + } + + private async Task SaveGridState() + { + var state = await Grid.GetPersistDataAsync(); + await JS.InvokeVoidAsync("localStorage.setItem", "gridOrders", state); + Message = "Grid state saved."; + } + + private async Task RestoreGridState() + { + var state = await JS.InvokeAsync("localStorage.getItem", "gridOrders"); + if (!string.IsNullOrEmpty(state)) + { + await Grid.SetPersistDataAsync(state); + Message = "Previous grid state restored."; + } + else + { + Message = "No saved state found."; + } + } + + private void OnActionBegin(ActionEventArgs args) + { + Message = string.Empty; + } +} + +{% endhighlight %} + +{% highlight c# tabtitle="OrderDetails.cs" %} + +public class OrderDetails +{ + public static List order = new List(); + + public OrderDetails(int orderId, string customerId, string shipCity, string shipName, + double freight, DateTime orderDate, string shipCountry) + { + this.OrderID = orderId; + this.CustomerID = customerId; + this.ShipCity = shipCity; + this.ShipName = shipName; + this.Freight = freight; + this.OrderDate = orderDate; + this.ShipCountry = shipCountry; + } + + public static List GetAllRecords() + { + if (order.Count == 0) + { + order.Add(new OrderDetails(10248, "VINET", "Reims", "Vins et alcools Chevalier", 32.38, new DateTime(2024, 1, 5), "France")); + order.Add(new OrderDetails(10249, "TOMSP", "Münster", "Toms Spezialitäten", 11.61, new DateTime(2024, 1, 7), "Germany")); + order.Add(new OrderDetails(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes", 65.83, new DateTime(2024, 1, 10), "Brazil")); + order.Add(new OrderDetails(10251, "VICTE", "Lyon", "Victuailles en stock", 41.34, new DateTime(2024, 1, 12), "France")); + order.Add(new OrderDetails(10252, "SUPRD", "Charleroi", "Suprêmes délices", 51.30, new DateTime(2024, 1, 14), "Belgium")); + order.Add(new OrderDetails(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes", 58.17, new DateTime(2024, 1, 16), "Brazil")); + order.Add(new OrderDetails(10254, "CHOPS", "Bern", "Chop-suey Chinese", 22.98, new DateTime(2024, 1, 18), "Switzerland")); + order.Add(new OrderDetails(10255, "RICSU", "Genève", "Richter Supermarkt", 148.33, new DateTime(2024, 1, 20), "Switzerland")); + order.Add(new OrderDetails(10256, "WELLI", "Resende", "Wellington Importadora", 13.97, new DateTime(2024, 1, 22), "Brazil")); + order.Add(new OrderDetails(10257, "HILAA", "San Cristóbal", "HILARION-Abastos", 81.91, new DateTime(2024, 1, 24), "Venezuela")); + } + return order; + } + + public int OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } + public double Freight { get; set; } + public DateTime OrderDate { get; set; } + public string ShipCountry { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZhSjfrUBZTkusas?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Maintaining custom query in a persistent state + +When [EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnablePersistence) is enabled, the Grid does not automatically maintain custom query parameters after a page load. This is because the Grid refreshes its query params for every page load. You can maintain the custom query params by resetting the `AddParams` method in the [OnActionBegin](https://blazor.syncfusion.com/documentation/datagrid/events#onactionbegin) event. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids + + + + + + + + + + +@code { + private SfGrid Grid; + public List Orders { get; set; } + protected override void OnInitialized() + { + Orders = OrderDetails.GetAllRecords(); + } + private void OnActionBegin(Syncfusion.Blazor.Grids.ActionEventArgs args) + { + Grid?.Query?.AddParams("dataSource", "data"); + } + +} + +{% endhighlight %} + +{% highlight c# tabtitle="OrderDetails.cs" %} + +public class OrderDetails +{ + public static List order = new List(); + public OrderDetails(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 (order.Count == 0) + { + order.Add(new OrderDetails(10248, "VINET", "Reims", "Vins et alcools Chevalier")); + order.Add(new OrderDetails(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + order.Add(new OrderDetails(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + order.Add(new OrderDetails(10251, "VICTE", "Lyon", "Victuailles en stock")); + order.Add(new OrderDetails(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + order.Add(new OrderDetails(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + order.Add(new OrderDetails(10254, "CHOPS", "Bern", "Chop-suey Chinese")); + order.Add(new OrderDetails(10255, "RICSU", "Genève", "Richter Supermarkt")); + order.Add(new OrderDetails(10256, "WELLI", "Resende", "Wellington Importadora")); + order.Add(new OrderDetails(10257, "HILAA", "San Cristóbal", "HILARION-Abastos")); + order.Add(new OrderDetails(10258, "ERNSH", "Graz", "Ernst Handel")); + order.Add(new OrderDetails(10259, "CENTC", "México D.F.", "Centro comercial Moctezuma")); + order.Add(new OrderDetails(10260, "OTTIK", "Köln", "Ottilies Käseladen")); + order.Add(new OrderDetails(10261, "QUEDE", "Rio de Janeiro", "Que Delícia")); + order.Add(new OrderDetails(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery")); + } + return order; + } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +## Get or set local storage value + +If the [EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_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**. + +To retrieve the Grid model from Local Storage, follow these steps: ```cshtml +string localStorageKey = "gridOrders"; //"gridOrders" is component name + component id. +string modelJson = await JS.InvokeAsync("localStorage.getItem", localStorageKey); +var modelObject = JsonSerializer.Deserialize(modelJson); +``` + +```cshtml +await JS.InvokeVoidAsync("localStorage.setItem", localStorageKey, modelJson); +``` +## Prevent columns from persisting + +In the Grid, you may sometimes want to prevent certain settings from being persisted when using the [EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnablePersistence) feature. When the `EnablePersistence` property is set to **true**, the Grid properties such as [Grouping](https://ej2.syncfusion.com/angular/documentation/api/grid/groupSettings/), [Paging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings), [Filtering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings), [Sorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortSettings), and [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Columns) will persist. + +The following example demonstrates how to prevent Grid columns from persisting. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons +@inject IJSRuntime JSRuntime - +Add Column +Remove Column + + - - - - + @foreach (var col in Columns) + { + + } @code { - public List Orders { get; set; } +private SfGrid Grid; +public List Orders { get; set; } +protected override void OnInitialized() +{ + Orders = OrderDetails.GetAllRecords(); +} +private List Columns = new() +{ +new GridColumnModel { Field = "OrderID", HeaderText = "Order ID", Width = "120" }, +new GridColumnModel { Field = "CustomerID", HeaderText = "Customer ID", Width = "150" }, +new GridColumnModel { Field = "ShipCity", HeaderText = "Ship City", Width = "150" }, +new GridColumnModel { Field = "ShipName", HeaderText = "Ship Name", Width = "150" } +}; - protected override void OnInitialized() +private void AddColumn() +{ + Columns.Add(new GridColumnModel { Field = "Freight", HeaderText = "Freight", Width = "120" }); +} + +private void RemoveColumn() +{ + if (Columns.Count > 0) { - Orders = Enumerable.Range(1, 75).Select(x => new Order() - { - OrderID = 1000 + x, - CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], - Freight = 2.1 * x, - OrderDate = DateTime.Now.AddDays(-x), - }).ToList(); + Columns.RemoveAt(Columns.Count - 1); } +} - public class Order +public class GridColumnModel +{ + public string Field { get; set; } = string.Empty; + public string HeaderText { get; set; } = string.Empty; + public string Width { get; set; } = "120"; +} +} + +{% endhighlight %} + +{% highlight c# tabtitle="OrderDetails.cs" %} + +public class OrderDetails +{ + public static List order = new List(); + + public OrderDetails(int orderId, string customerId, string shipCity, string shipName, + double freight, DateTime orderDate, string shipCountry) { - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public DateTime? OrderDate { get; set; } - public double? Freight { get; set; } + this.OrderID = orderId; + this.CustomerID = customerId; + this.ShipCity = shipCity; + this.ShipName = shipName; + this.Freight = freight; + this.OrderDate = orderDate; + this.ShipCountry = shipCountry; } + + public static List GetAllRecords() + { + if (order.Count == 0) + { + order.Add(new OrderDetails(10248, "VINET", "Reims", "Vins et alcools Chevalier", 32.38, new DateTime(2024, 1, 5), "France")); + order.Add(new OrderDetails(10249, "TOMSP", "Münster", "Toms Spezialitäten", 11.61, new DateTime(2024, 1, 7), "Germany")); + order.Add(new OrderDetails(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes", 65.83, new DateTime(2024, 1, 10), "Brazil")); + order.Add(new OrderDetails(10251, "VICTE", "Lyon", "Victuailles en stock", 41.34, new DateTime(2024, 1, 12), "France")); + order.Add(new OrderDetails(10252, "SUPRD", "Charleroi", "Suprêmes délices", 51.30, new DateTime(2024, 1, 14), "Belgium")); + order.Add(new OrderDetails(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes", 58.17, new DateTime(2024, 1, 16), "Brazil")); + order.Add(new OrderDetails(10254, "CHOPS", "Bern", "Chop-suey Chinese", 22.98, new DateTime(2024, 1, 18), "Switzerland")); + order.Add(new OrderDetails(10255, "RICSU", "Genève", "Richter Supermarkt", 148.33, new DateTime(2024, 1, 20), "Switzerland")); + order.Add(new OrderDetails(10256, "WELLI", "Resende", "Wellington Importadora", 13.97, new DateTime(2024, 1, 22), "Brazil")); + order.Add(new OrderDetails(10257, "HILAA", "San Cristóbal", "HILARION-Abastos", 81.91, new DateTime(2024, 1, 24), "Venezuela")); + } + return order; + } + + public int OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } + public double Freight { get; set; } + public DateTime OrderDate { get; set; } + public string ShipCountry { get; set; } } -``` -You can use [ResetPersistData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ResetPersistData) method to reset grid state to its original state. This will clear persisted data in window local storage and renders grid with its original property values. +{% endhighlight %} +{% endtabs %} -## Handling grid state manually +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBSZJLKLzxANPLC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -You can handle the grid's state manually by using in-built state persistence methods. You can use [GetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetPersistDataAsync), [SetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SetPersistDataAsync_System_String_), [ResetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ResetPersistDataAsync) methods of grid to save, load and reset the Grid's persisted state manually. [GetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetPersistDataAsync) method will return grid current state as a string value, which is suitable for sending them over network and storing in data bases. +## Handling Grid state manually + +You can handle the Grid's state manually by using in-built state persistence methods. You can use [GetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetPersistDataAsync), [SetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SetPersistDataAsync_System_String_), [ResetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ResetPersistDataAsync) methods of Grid to save, load and reset the Grid's persisted state manually. [GetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetPersistDataAsync) method will return Grid current state as a string value, which is suitable for sending them over network and storing in data bases. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Buttons @@ -402,41 +761,82 @@ You can handle the grid's state manually by using in-built state persistence met Set State Reset State - + - - - - + + + + @code { - SfGrid Grid; - - public List Orders { get; set; } + private SfGrid Grid; + public List Orders { get; set; } public string _state; - protected override void OnInitialized() { - Orders = Enumerable.Range(1, 75).Select(x => new Order() - { - OrderID = 1000 + x, - CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], - Freight = 2.1 * x, - OrderDate = DateTime.Now.AddDays(-x), - }).ToList(); + Orders = OrderData.GetAllRecords(); } +} - public class Order +{% endhighlight %} + +{% highlight c# tabtitle="OrderData.cs" %} + +public class OrderData +{ + public static List Orders = new List(); + + public OrderData() { } + + public OrderData(int OrderID, string CustomerID, string ShipName, double Freight, DateTime? OrderDate, DateTime? ShippedDate, bool? IsVerified, string ShipCity, string ShipCountry, int employeeID) { - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public DateTime? OrderDate { get; set; } - public double? Freight { get; set; } + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.ShipName = ShipName; + this.Freight = Freight; + this.OrderDate = OrderDate; + this.ShippedDate = ShippedDate; + this.IsVerified = IsVerified; + this.ShipCity = ShipCity; + this.ShipCountry = ShipCountry; + this.EmployeeID = employeeID; } + + public static List GetAllRecords() + { + if (Orders.Count == 0) + { + Orders.Add(new OrderData(10248, "VINET", "Vins et alcools Chevalier", 32.38, new DateTime(1996, 7, 4), new DateTime(1996, 08, 07), true, "Reims", "France", 1)); + Orders.Add(new OrderData(10249, "TOMSP", "Toms Spezialitäten", 11.61, new DateTime(1996, 7, 5), new DateTime(1996, 08, 07), false, "Münster", "Germany", 2)); + Orders.Add(new OrderData(10250, "HANAR", "Hanari Carnes", 65.83, new DateTime(1996, 7, 6), new DateTime(1996, 08, 07), true, "Rio de Janeiro", "Brazil", 3)); + Orders.Add(new OrderData(10251, "VINET", "Vins et alcools Chevalier", 41.34, new DateTime(1996, 7, 7), new DateTime(1996, 08, 07), false, "Lyon", "France", 1)); + Orders.Add(new OrderData(10252, "SUPRD", "Suprêmes délices", 151.30, new DateTime(1996, 7, 8), new DateTime(1996, 08, 07), true, "Charleroi", "Belgium", 2)); + Orders.Add(new OrderData(10253, "HANAR", "Hanari Carnes", 58.17, new DateTime(1996, 7, 9), new DateTime(1996, 08, 07), false, "Bern", "Switzerland", 3)); + Orders.Add(new OrderData(10254, "CHOPS", "Chop-suey Chinese", 22.98, new DateTime(1996, 7, 10), new DateTime(1996, 08, 07), true, "Genève", "Switzerland", 2)); + Orders.Add(new OrderData(10255, "VINET", "Vins et alcools Chevalier", 148.33, new DateTime(1996, 7, 11), new DateTime(1996, 08, 07), false, "Resende", "Brazil", 1)); + Orders.Add(new OrderData(10256, "HANAR", "Hanari Carnes", 13.97, new DateTime(1996, 7, 12), new DateTime(1996, 08, 07), true, "Paris", "France", 3)); + } + return Orders; + } + + public int OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipName { get; set; } + public double? Freight { get; set; } + public DateTime? OrderDate { get; set; } + public DateTime? ShippedDate { get; set; } + public bool? IsVerified { get; set; } + public string ShipCity { get; set; } + public string ShipCountry { get; set; } + public int EmployeeID { get; set; } } -``` + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVIZJLqVEATFpSp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} N> You can refer to our [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand how to present and manipulate data. \ No newline at end of file From ce504ffcb0ec82493526d57a9996ec69186b3313 Mon Sep 17 00:00:00 2001 From: Gayathri4135 Date: Fri, 25 Apr 2025 16:36:33 +0530 Subject: [PATCH 3/7] Updated the md file --- blazor/datagrid/state-management.md | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/blazor/datagrid/state-management.md b/blazor/datagrid/state-management.md index d8c1fc8372..fb09ec0937 100644 --- a/blazor/datagrid/state-management.md +++ b/blazor/datagrid/state-management.md @@ -1,7 +1,7 @@ --- layout: post title: State Management in Blazor DataGrid Component | Syncfusion -description: Checkout and learn here all about State Management in Syncfusion Blazor DataGrid component and more. +description: Checkout and learn here all about State Management in Syncfusion Blazor DataGrid and more. platform: Blazor control: DataGrid documentation: ug @@ -9,7 +9,7 @@ documentation: ug # State Management in Blazor DataGrid -State management in the Grid allows you to maintain the Grid's state even after a browser refresh or when navigating to a different page within the same browser session. This feature is particularly useful for retaining the Grid's configuration and data even after a page reload. +State management in the Syncfusion Blazor DataGrid allows you to maintain the Grid's state even after a browser refresh or when navigating to a different page within the same browser session. This feature is particularly useful for retaining the Grid's configuration and data even after a page reload. To enable state persistence in the Grid, you can utilize the [EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnablePersistence) property. When this property is set to **true**, the Grid will automatically save its state in the browser's [LocalStorage](https://www.w3schools.com/html/html5_webstorage.asp#), ensuring that the state is preserved across page reloads. @@ -37,7 +37,7 @@ The Grid will persist only the last selected row index. ## Enabling persistence in Grid -State persistence allows the Grid to retain the current Grid state in the browser local storage for state maintenance. This action is handled through the `EnablePersistence` property which is set to false by default. When it is set to true, some properties of the Grid will be retained even after refreshing the page. +State persistence allows the Syncfusion Blazor DataGrid to retain the current Grid state in the browser local storage for state maintenance. This action is handled through the [EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnablePersistence) property which is set to false by default. When it is set to true, some properties of the Grid will be retained even after refreshing the page. N> The state will be persisted based on **ID** property. So, it is recommended to explicitly set the **ID** property for Grid. @@ -125,7 +125,7 @@ public class OrderData ## Restore initial Grid state -In the Syncfusion Blazor Grid, you have the capability to restore the Grid to its initial state, reverting all changes and configurations made during the interaction. This feature can be particularly useful when you want to reset the Grid to its original settings, eliminating any applied filters, sorting, or column reordering. +In the Syncfusion Blazor DataGrid, you have the capability to restore the Grid to its initial state, reverting all changes and configurations made during the interaction. This feature can be particularly useful when you want to reset the Grid to its original settings, eliminating any applied filters, sorting, or column reordering. Here are the steps to reset the Grid to its initial state, even when the [EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnablePersistence) property is enabled: @@ -211,7 +211,7 @@ public class OrderData ### Clearing local storage -Another method to reset the Grid is by clearing the local storage associated with the Grid . This action removes any stored state information, allowing the Grid to return to its original configuration. +Another method to reset the Syncfusion Blazor DataGrid is by clearing the local storage associated with the Grid. This action removes any stored state information, allowing the Grid to return to its original configuration. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -241,7 +241,7 @@ Another method to reset the Grid is by clearing the local storage associated wit private async Task RestoreGridState() { await Grid.ResetPersistDataAsync(); - await JS.InvokeVoidAsync("localStorage.setItem", "Grid", ""); // "Grid" = ID used in SfGrid. + await JS.InvokeVoidAsync("localStorage.setItem", "Grid", ""); await JS.InvokeVoidAsync("location.reload"); } } @@ -295,7 +295,7 @@ public class OrderDetails ## Restore to specific state version -Syncfusion Blazor Grid supports state persistence, allowing to save and restore Grid configurations such as column settings, filters, sorting, grouping, paging, and more. This example demonstrates how to implement version-based state persistence using localStorage. +Syncfusion Blazor DataGrid supports state persistence, allowing to save and restore Grid configurations such as column settings, filters, sorting, grouping, paging, and more. This example demonstrates how to implement version-based state persistence using localStorage. In this sample, each version represents a unique saved Grid configuration (or state). When a version button is clicked: @@ -307,7 +307,7 @@ In this sample, each version represents a unique saved Grid configuration (or st 4. If no data is found, a new state will be stored the next time the Grid is modified. -To implement version-based persistence in Syncfusion Blazor Grid, first add the necessary components: use `SfGrid` to display the data and `SfButton` components to allow users to select different version states. The Grid's **PersistenceKey** is set dynamically based on the selected version (e.g., gridOrderDetails_v.1), ensuring each version maintains a unique state in localStorage. The core logic for switching versions is handled in the `ChangeVersion` method. This method saves the current Grid state using [GetPersistDataAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetPersistDataAsync) before switching versions. It then attempts to load the state associated with the selected version using [SetPersistDataAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SetPersistDataAsync_System_String_). If a persisted state is available, it is applied to the Grid. otherwise, a message is displayed indicating that no saved state exists and a new state will be stored going forward. +To implement version-based persistence in Syncfusion Blazor Grid, set **PersistenceKey** dynamically based on the selected version (e.g., gridOrderDetails_v.1), ensuring each version maintains a unique state in localStorage. The core logic for switching versions is handled in the `ChangeVersion` method. This method saves the current Grid state using [GetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetPersistDataAsync) before switching versions. It then attempts to load the state associated with the selected version using [SetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SetPersistDataAsync_System_String_). If a persisted state is available, it is applied to the Grid. otherwise, a message is displayed indicating that no saved state exists and a new state will be stored going forward. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -421,7 +421,7 @@ public class OrderDetails ## Restore to previous state -The Syncfusion Blazor Grid allows you to save and restore its state using local storage. This feature is helpful when you want to preserve the current state of the Grid, such as column order, sorting, and filtering, so that you can return to your previous work or configurations. +The Syncfusion Blazor DataGrid allows you to save and restore its state using local storage. This feature is helpful when you want to preserve the current state of the Grid, such as column order, sorting, and filtering, so that you can return to your previous work or configurations. To implement this functionality, use the `getItem` and `setItem` methods for local storage, along with the Grid `setProperties` and [GetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetPersistDataAsync) methods. @@ -572,7 +572,6 @@ When [EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor { Grid?.Query?.AddParams("dataSource", "data"); } - } {% endhighlight %} From 0047f855d7f8e500ff69a6ec956a57d331146264 Mon Sep 17 00:00:00 2001 From: Gayathri4135 Date: Fri, 25 Apr 2025 17:16:02 +0530 Subject: [PATCH 4/7] Updated the md file --- blazor/datagrid/state-management.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/blazor/datagrid/state-management.md b/blazor/datagrid/state-management.md index fb09ec0937..2502470c1c 100644 --- a/blazor/datagrid/state-management.md +++ b/blazor/datagrid/state-management.md @@ -1,6 +1,6 @@ --- layout: post -title: State Management in Blazor DataGrid Component | Syncfusion +title: State Management in Blazor DataGrid | Syncfusion description: Checkout and learn here all about State Management in Syncfusion Blazor DataGrid and more. platform: Blazor control: DataGrid @@ -295,7 +295,7 @@ public class OrderDetails ## Restore to specific state version -Syncfusion Blazor DataGrid supports state persistence, allowing to save and restore Grid configurations such as column settings, filters, sorting, grouping, paging, and more. This example demonstrates how to implement version-based state persistence using localStorage. +The Syncfusion Blazor DataGrid supports state persistence, allowing to save and restore Grid configurations such as column settings, filters, sorting, grouping, paging, and more. This example demonstrates how to implement version-based state persistence using localStorage. In this sample, each version represents a unique saved Grid configuration (or state). When a version button is clicked: @@ -307,7 +307,7 @@ In this sample, each version represents a unique saved Grid configuration (or st 4. If no data is found, a new state will be stored the next time the Grid is modified. -To implement version-based persistence in Syncfusion Blazor Grid, set **PersistenceKey** dynamically based on the selected version (e.g., gridOrderDetails_v.1), ensuring each version maintains a unique state in localStorage. The core logic for switching versions is handled in the `ChangeVersion` method. This method saves the current Grid state using [GetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetPersistDataAsync) before switching versions. It then attempts to load the state associated with the selected version using [SetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SetPersistDataAsync_System_String_). If a persisted state is available, it is applied to the Grid. otherwise, a message is displayed indicating that no saved state exists and a new state will be stored going forward. +To implement version-based persistence in Grid, set **PersistenceKey** dynamically based on the selected version (e.g., gridOrderDetails_v.1), ensuring each version maintains a unique state in localStorage. The core logic for switching versions is handled in the `ChangeVersion` method. This method saves the current Grid state using [GetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetPersistDataAsync) before switching versions. It then attempts to load the state associated with the selected version using [SetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SetPersistDataAsync_System_String_). If a persisted state is available, it is applied to the Grid. otherwise, a message is displayed indicating that no saved state exists and a new state will be stored going forward. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -425,7 +425,7 @@ The Syncfusion Blazor DataGrid allows you to save and restore its state using lo To implement this functionality, use the `getItem` and `setItem` methods for local storage, along with the Grid `setProperties` and [GetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetPersistDataAsync) methods. -The provided code demonstrates how to save and restore the previous state of a Syncfusion Blazor Grid using local storage. +The provided code demonstrates how to save and restore the previous state of a Grid using local storage. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -478,7 +478,7 @@ The provided code demonstrates how to save and restore the previous state of a S if (!string.IsNullOrEmpty(state)) { await Grid.SetPersistDataAsync(state); - Message = "Previous grid state restored."; + Message = "Previous Grid state restored."; } else { @@ -636,7 +636,7 @@ await JS.InvokeVoidAsync("localStorage.setItem", localStorageKey, modelJson); ``` ## Prevent columns from persisting -In the Grid, you may sometimes want to prevent certain settings from being persisted when using the [EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnablePersistence) feature. When the `EnablePersistence` property is set to **true**, the Grid properties such as [Grouping](https://ej2.syncfusion.com/angular/documentation/api/grid/groupSettings/), [Paging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings), [Filtering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings), [Sorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortSettings), and [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Columns) will persist. +In the Syncfusion Blazor Grid, you may sometimes want to prevent certain settings from being persisted when using the [EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnablePersistence) feature. When the `EnablePersistence` property is set to **true**, the Grid properties such as [Grouping](https://ej2.syncfusion.com/angular/documentation/api/grid/groupSettings/), [Paging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings), [Filtering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings), [Sorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortSettings), and [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Columns) will persist. The following example demonstrates how to prevent Grid columns from persisting. @@ -748,7 +748,7 @@ public class OrderDetails ## Handling Grid state manually -You can handle the Grid's state manually by using in-built state persistence methods. You can use [GetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetPersistDataAsync), [SetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SetPersistDataAsync_System_String_), [ResetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ResetPersistDataAsync) methods of Grid to save, load and reset the Grid's persisted state manually. [GetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetPersistDataAsync) method will return Grid current state as a string value, which is suitable for sending them over network and storing in data bases. +You can handle the Syncfusion Blazor Grid's state manually by using in-built state persistence methods. You can use [GetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetPersistDataAsync), [SetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SetPersistDataAsync_System_String_), [ResetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ResetPersistDataAsync) methods of Grid to save, load and reset the Grid's persisted state manually. [GetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetPersistDataAsync) method will return Grid current state as a string value, which is suitable for sending them over network and storing in data bases. {% tabs %} {% highlight razor tabtitle="Index.razor" %} From 605f1b478acd7f5eeeb3d17d2bc261b23520ed0d Mon Sep 17 00:00:00 2001 From: Gayathri4135 Date: Fri, 9 May 2025 14:04:59 +0530 Subject: [PATCH 5/7] Updated the md file --- blazor/datagrid/state-management.md | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/blazor/datagrid/state-management.md b/blazor/datagrid/state-management.md index 2502470c1c..7c8b76ef2a 100644 --- a/blazor/datagrid/state-management.md +++ b/blazor/datagrid/state-management.md @@ -13,7 +13,7 @@ State management in the Syncfusion Blazor DataGrid allows you to maintain the Gr To enable state persistence in the Grid, you can utilize the [EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnablePersistence) property. When this property is set to **true**, the Grid will automatically save its state in the browser's [LocalStorage](https://www.w3schools.com/html/html5_webstorage.asp#), ensuring that the state is preserved across page reloads. -```cshtml +```razor ``` @@ -41,6 +41,8 @@ State persistence allows the Syncfusion Blazor DataGrid to retain the current Gr N> The state will be persisted based on **ID** property. So, it is recommended to explicitly set the **ID** property for Grid. +The following example demonstrates how to enabling persistence in Grid. + {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -625,18 +627,18 @@ If the [EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz To retrieve the Grid model from Local Storage, follow these steps: -```cshtml +```razor string localStorageKey = "gridOrders"; //"gridOrders" is component name + component id. string modelJson = await JS.InvokeAsync("localStorage.getItem", localStorageKey); var modelObject = JsonSerializer.Deserialize(modelJson); ``` -```cshtml +```razor await JS.InvokeVoidAsync("localStorage.setItem", localStorageKey, modelJson); ``` ## Prevent columns from persisting -In the Syncfusion Blazor Grid, you may sometimes want to prevent certain settings from being persisted when using the [EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnablePersistence) feature. When the `EnablePersistence` property is set to **true**, the Grid properties such as [Grouping](https://ej2.syncfusion.com/angular/documentation/api/grid/groupSettings/), [Paging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings), [Filtering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings), [Sorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortSettings), and [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Columns) will persist. +In the Syncfusion Blazor DataGrid, you may sometimes want to prevent certain settings from being persisted when using the [EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnablePersistence) feature. When the `EnablePersistence` property is set to **true**, the Grid properties such as [Grouping](https://ej2.syncfusion.com/angular/documentation/api/grid/groupSettings/), [Paging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings), [Filtering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings), [Sorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortSettings), and [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Columns) will persist. The following example demonstrates how to prevent Grid columns from persisting. @@ -748,7 +750,9 @@ public class OrderDetails ## Handling Grid state manually -You can handle the Syncfusion Blazor Grid's state manually by using in-built state persistence methods. You can use [GetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetPersistDataAsync), [SetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SetPersistDataAsync_System_String_), [ResetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ResetPersistDataAsync) methods of Grid to save, load and reset the Grid's persisted state manually. [GetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetPersistDataAsync) method will return Grid current state as a string value, which is suitable for sending them over network and storing in data bases. +You can handle the Syncfusion Blazor DataGrid state manually by using in-built state persistence methods. You can use [GetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetPersistDataAsync), [SetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SetPersistDataAsync_System_String_), [ResetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ResetPersistDataAsync) methods of Grid to save, load and reset the Grid's persisted state manually. [GetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetPersistDataAsync) method will return Grid current state as a string value, which is suitable for sending them over network and storing in data bases. + +The following example demonstrates how to handling Grid state manually. {% tabs %} {% highlight razor tabtitle="Index.razor" %} From 4dcd614704195ed1813b69093271e6ad8db2748b Mon Sep 17 00:00:00 2001 From: Gayathri4135 Date: Mon, 12 May 2025 13:06:43 +0530 Subject: [PATCH 6/7] Updated the md file --- blazor/datagrid/state-management.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/blazor/datagrid/state-management.md b/blazor/datagrid/state-management.md index 7c8b76ef2a..34cace5a0d 100644 --- a/blazor/datagrid/state-management.md +++ b/blazor/datagrid/state-management.md @@ -41,7 +41,7 @@ State persistence allows the Syncfusion Blazor DataGrid to retain the current Gr N> The state will be persisted based on **ID** property. So, it is recommended to explicitly set the **ID** property for Grid. -The following example demonstrates how to enabling persistence in Grid. +The following example demonstrates how to enabling persistence in Grid: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -640,7 +640,7 @@ await JS.InvokeVoidAsync("localStorage.setItem", localStorageKey, modelJson); In the Syncfusion Blazor DataGrid, you may sometimes want to prevent certain settings from being persisted when using the [EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnablePersistence) feature. When the `EnablePersistence` property is set to **true**, the Grid properties such as [Grouping](https://ej2.syncfusion.com/angular/documentation/api/grid/groupSettings/), [Paging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings), [Filtering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings), [Sorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortSettings), and [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Columns) will persist. -The following example demonstrates how to prevent Grid columns from persisting. +The following example demonstrates how to prevent Grid columns from persisting: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -752,7 +752,7 @@ public class OrderDetails You can handle the Syncfusion Blazor DataGrid state manually by using in-built state persistence methods. You can use [GetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetPersistDataAsync), [SetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SetPersistDataAsync_System_String_), [ResetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ResetPersistDataAsync) methods of Grid to save, load and reset the Grid's persisted state manually. [GetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetPersistDataAsync) method will return Grid current state as a string value, which is suitable for sending them over network and storing in data bases. -The following example demonstrates how to handling Grid state manually. +The following example demonstrates how to handling Grid state manually: {% tabs %} {% highlight razor tabtitle="Index.razor" %} From e72dbe4a742a393c7b43806a10e9dcc33981f186 Mon Sep 17 00:00:00 2001 From: Gayathri4135 Date: Fri, 16 May 2025 17:30:20 +0530 Subject: [PATCH 7/7] updated the md file --- blazor/datagrid/state-management.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/blazor/datagrid/state-management.md b/blazor/datagrid/state-management.md index 34cace5a0d..1ce4cec01e 100644 --- a/blazor/datagrid/state-management.md +++ b/blazor/datagrid/state-management.md @@ -13,7 +13,7 @@ State management in the Syncfusion Blazor DataGrid allows you to maintain the Gr To enable state persistence in the Grid, you can utilize the [EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnablePersistence) property. When this property is set to **true**, the Grid will automatically save its state in the browser's [LocalStorage](https://www.w3schools.com/html/html5_webstorage.asp#), ensuring that the state is preserved across page reloads. -```razor +```cs ``` @@ -427,7 +427,7 @@ The Syncfusion Blazor DataGrid allows you to save and restore its state using lo To implement this functionality, use the `getItem` and `setItem` methods for local storage, along with the Grid `setProperties` and [GetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetPersistDataAsync) methods. -The provided code demonstrates how to save and restore the previous state of a Grid using local storage. +The provided code demonstrates how to save and restore the previous state of a Grid using local storage. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -627,13 +627,13 @@ If the [EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz To retrieve the Grid model from Local Storage, follow these steps: -```razor +```cs string localStorageKey = "gridOrders"; //"gridOrders" is component name + component id. string modelJson = await JS.InvokeAsync("localStorage.getItem", localStorageKey); var modelObject = JsonSerializer.Deserialize(modelJson); ``` -```razor +```cs await JS.InvokeVoidAsync("localStorage.setItem", localStorageKey, modelJson); ``` ## Prevent columns from persisting