How to Maintain Expand/Collapsed State of Rows During Page Refresh in TreeGrid

A quick start project demonstrating how to persist the expand and collapsed state of TreeGrid rows across page refreshes using Syncfusion EJ2 TreeGrid in ASP.NET Core, ASP.NET MVC, and Vue.js.

Overview

This project shows how to maintain row expand/collapsed states in the Syncfusion TreeGrid using localStorage to prevent state reset on page refresh.

Features

• State Persistence: Save and restore row expand/collapsed state across refreshes
• Local Storage: Uses localStorage for lightweight state management
• Multiple Frameworks: Supports ASP.NET Core, ASP.NET MVC, and Vue.js

Project Prerequisites

• Visual Studio Code
• NodeJS - v12.0.0 or later (Vue.js)
• .NET SDK (for ASP.NET Core / MVC)
• Syncfusion EJ2 license or trial

Installation

1. Clone the repository: git clone <repository-url>
2. Navigate to the project directory
3. Run npm install (Vue.js) or open the .sln file (ASP.NET)

How to Run This Application

Vue.js: Navigate to the Vue folder, then run npm install and npm run dev.

ASP.NET Core / MVC: Open the .sln file in Visual Studio and run.

Documentation and Resources

• Documentation: https://ej2.syncfusion.com/documentation/treegrid/getting-started
• Live Demo: https://ej2.syncfusion.com/demos/#/treegrid