---
title: "Enhance User Experience: Preserve ASP.NET Core Grid Layout Settings"
published_at: "2024-05-22T10:00:34+00:00"
modified_at: "2026-06-23T08:30:52+00:00"
url: "https://www.syncfusion.com/blogs/post/preserve-aspdotnet-core-grid-layout"
excerpt: "This blog explains how to preserve and restore layout settings in the Syncfusion ASP.NET Core DataGrid to enhance user experience."
taxonomy_category:
- "ASP.NET Core"
- "DataGrid"
- "Development"
- "Syncfusion"
- "Web"
taxonomy_post_tag:
- "ASP.NET Core"
- "DataGrid"
- "grid layout"
- "productivity"
- "user experience"
- "Web"
---
# Enhance User Experience: Preserve ASP.NET Core Grid Layout Settings
[Maithiliy K](https://www.syncfusion.com/blogs/author/maithiliyk)
**TL;DR:** Once again, are you frustrated when refreshing the app and losing your settings? Syncfusion ASP.NET Core DataGrid easily preserves and restores user preferences like column order, width, and sorting. This guide covers setting up an ASP.NET Core project, configuring DataGrid, and managing grid states with server-side storage.
Preserving and restoring layout configurations is pivotal in delivering a smooth and intuitive user experience in the ever-evolving web development landscape. Today, we embark on an in-depth journey to achieve that goal in our Syncfusion [ASP.NET Core DataGrid](https://www.syncfusion.com/aspnet-core-ui-controls/grid)
.
This guide will delve into the intricacies of utilizing server-side mechanisms to efficiently manage and persist the grid’s state across various interactions and sessions. We’ll unveil the seamless fusion of server-side processing with client-side interactions, facilitating enhanced performance and usability for DataGrid implementations.
## Enhancing user experience: Storing and restoring configurations
Efficiency and convenience take center stage as we discuss how storing grid layout configurations, including column order, width, visibility, sorting, and more, can significantly enhance the user experience. By enabling users to retain their customized settings across sessions, we eliminate the need for repetitive configuration, fostering a smoother and more user-friendly interface.
## Prerequisites
Before diving into the implementation details, ensure that your system meets the [requirements for ASP.NET Core components](https://ej2.syncfusion.com/aspnetcore/documentation/system-requirements/)
.
## Creating an ASP.NET Core web app with Razor pages
Follow the steps to create an ASP.NET Core web app using Razor pages:
- Utilize [Microsoft Templates](https://docs.microsoft.com/en-us/aspnet/core/tutorials/razor-pages/razor-pages-start?view=aspnetcore-6.0&tabs=visual-studio#create-a-razor-pages-web-app) to initiate your project.
- Incorporate [Syncfusion ASP.NET Core Extension](https://ej2.syncfusion.com/aspnetcore/documentation/getting-started/project-template/) into your project setup.
## Getting started with ASP.NET Core DataGrid
Refer to the [getting started documentation](https://ej2.syncfusion.com/aspnetcore/documentation/grid/getting-started-core)
for a comprehensive guide on initiating your journey with the ASP.NET Core DataGrid.
Simplify ASP.NET Core DataGrid Development
Spend less time building grid features from scratch. Syncfusion ASP.NET Core DataGrid includes ready-to-use support for data binding, paging, sorting, filtering, editing, and exporting.
[Start Building Today](https://www.syncfusion.com/aspnet-core-ui-controls/grid)
## Step-by-step guide to preserve ASP.NET Core DataGrid layout settings
In the following example, we will meticulously outline the process of persisting essential features and their outcomes following user interactions with the grid layout. These features include:
- Filtering
- Sorting
- Grouping
- Paging
- Column chooser (Show/Hide Columns)
### Defining the initial DataGrid configuration
To begin configuring the Syncfusion ASP.NET Core DataGrid, navigate to the **Index.cshtml** file. Here, we outline the foundational steps for setting up and preserving various grid features.
Refer to the following code example.
```
```
In the provided code snippet, we have initialized the grid component and configured its essential attributes, such as data source, height, and various interactive functionalities like filtering, grouping, sorting, and paging. Additionally, we have defined columns with specific fields and headers to structure the grid’s content effectively.
Let’s implement an event called **created** to preserve the grid’s initial state before user interactions. This event captures and stores the grid’s initial configuration in the local storage.
```
```
### Defining data model and data source
In the **HomeController.cs** file, we will establish the data model **(OrdersDetails)** and data source **(GetAllRecords)** for the DataGrid. Then, we’ll retrieve records using the ** OrdersDetails.GetAllRecords()** method and store them in ** ViewBag.DataSource**, thereby enabling its utilization as local data on the client side.
```
public IActionResult Index()
{
var Order = OrdersDetails.GetAllRecords();
ViewBag.DataSource = Order;
return View();
}
public class OrdersDetails
{
public static List order = new List();
public OrdersDetails()
{
}
public OrdersDetails(int OrderID, string CustomerId, int EmployeeId, double Freight, string ShipCity, string ShipCountry)
{
this.OrderID = OrderID;
this.CustomerID = CustomerId;
this.EmployeeID = EmployeeId;
this.Freight = Freight;
this.ShipCity = ShipCity;
this.ShipCountry = ShipCountry;
}
public static List GetAllRecords()
{
if (order.Count() == 0)
{
int code = 10000;
for (int i = 1; i < 5; i++)
{
order.Add(new OrdersDetails(code + 1, "ALFKI", i + 0, 0, "Berlin", "Denmark"));
order.Add(new OrdersDetails(code + 2, "ANATR", i + 2, 3.3 * i, "Madrid", "Brazil"));
order.Add(new OrdersDetails(code + 3, "ANTON", i + 1, 0, "Cholchester", "Germany"));
order.Add(new OrdersDetails(code + 4, "BLONP", i + 3, 5.3 * i, "Marseille", "Austria"));
order.Add(new OrdersDetails(code + 5, "BOLID", i + 4, 6.3 * i, "Tsawassen", "Switzerland"));
code += 5;
}
}
return order;
}
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public int? EmployeeID { get; set; }
public double? Freight { get; set; }
public string ShipCity { get; set; }
public string ShipCountry { get; set; }
}
```
## Creating separate buttons for layout persistence actions
Here, we will use the [Syncfusion ASP.NET Core Button](https://ej2.syncfusion.com/aspnetcore/documentation/button/getting-started)
component to render buttons for storing, restoring, and resetting layout persistence actions.
```
```
## Managing store action on the client side
In the **script** section of the ** Index.cshtml** file, we’ll utilize ** addEventListener** to handle store actions. Upon clicking the ** storestate** button, it retrieves persisted data from the grid via the ** getPersistData()** method and sends it to the server using an ** EJ2 AJAX POST** request.
Refer to the following code example.
```
document.getElementById("storestate").addEventListener('click', function () {
// Get the persisted data from the grid using the getPersistData method.
var persistData = JSON.stringify({ persistData: grid.getPersistData() })
var ajax = new ej.base.Ajax({ // Used EJ2 ajax to send the stored persistData to the server.
url: "/Home/StorePersistData",
type: "POST",
contentType: "application/json; charset=utf-8",
datatype: "json",
data: persistData // Send the data to the server.
});
ajax.send();
});
```
### Restoration actions on the client side
Within the **script** section of the ** Index.cshtml** file, incorporate ** addEventListener** to manage restoration actions. Upon clicking the ** restorestate** button, the script will fetch persisted data from the server and then seamlessly integrate it into the grid by employing the ** setProperties()** method.
Refer to the following code example.
```
document.getElementById("restorestate").addEventListener('click', function () {
var ajax = new ej.base.Ajax({ // Used EJ2 ajax to retrieve the persist data from the server.
url: "/Home/Restore",
type: "POST",
contentType: "application/json; charset=utf-8"
});
ajax.send();
ajax.onSuccess = function (result) {
var state = JSON.parse(result); // Get the data.
grid.setProperties(state); // Restore the Grid state.
}
});
```
### Reset actions on the client side
In the**Index.cshtml** file’s**script** section, include the ** onClick** event to manage the reset action**.** When the ** reset** button is clicked, it fetches the initial grid persisted data from the local storage and applies it to the grid using the ** setProperties**() method.
Refer to the following code example.
```
document.getElementById('reset').onclick = function () {
var savedProperties = JSON.parse(window.localStorage.getItem('initialGrid')); // Get the initial grid state from local storage.
grid.setProperties(savedProperties)// Reset the grid to the initial state.
}
```
### Server-side implementation of storage and restoration actions
In the **HomeController.cs** file, establish the server-side actions for managing the storage and restoration of the grid’s persisted data. The ** StorePersistData** action is responsible for receiving data from the client and storing it in a static variable. Conversely, the ** Restore** action merely returns the stored data.
Refer to the following code example.
```
public static string? persistedData;
public IActionResult StorePersistData([FromBody] StoreData persistData)
{
persistedData = persistData.persistData; // You can store this in the database.
return new JsonResult(persistedData);
}
public IActionResult Restore()
{
return Content(persistedData); // Retrieve the stored layout from the database.
}
```
Refer to the following output image.
Preserving ASP.NET Core DataGrid layout settings
## GitHub reference
Refer to the preserving ASP.NET Core DataGrid layout settings demo on [GitHub](https://github.com/SyncfusionExamples/persist-the-grid-query)
for more
## Conclusion
Thanks for reading this blog! We have comprehensively explored how to preserve [Syncfusion’s ASP.NET Core DataGrid](https://www.syncfusion.com/aspnet-core-ui-controls/grid)
layout. This powerful technique enhances user experiences and empowers users to maintain personalized preferences across sessions. Try out the steps in this blog and share your feedback in the comment section below.
Alternatively, you can contact us through our [support forums](https://www.syncfusion.com/forums)
, [support portal](https://support.syncfusion.com/)
, or [feedback portal](https://www.syncfusion.com/feedback/)
. We’re always eager to assist you!
## Related blogs
- [Easily Convert Organizational Chart Diagrams to PowerPoint Presentations](https://www.syncfusion.com/blogs/post/org-chart-diagram-to-ppt)
- [Simple Steps to View a PowerPoint Presentation in an ASP.NET Core Application](https://www.syncfusion.com/blogs/post/view-powerpoint-asp-dotnet-core)
- [Easily Group Data into Ranges in Web Applications Using Pivot Table](https://www.syncfusion.com/blogs/post/easily-group-data-into-ranges-in-web-applications-using-pivot-table)
- [Handling CSV Files in ASP.NET Core Web APIs](https://www.syncfusion.com/blogs/post/handling-csv-files-in-asp-net-core-web-apis)