How to maintain the state of TreeView nodes on page refresh?

Description

The state of the TreeView nodes are changed to default when the page is refreshed or on any post-back operations. You can maintain the state of nodes by restoring the data from browser cookies.

Solution

In order to maintain the state of TreeView after rebinding the source or on page refresh, you can store the TreeView node state in client-side script on every TreeView action and restore them back on TreeView load. Using the jQuery cookies function you can store the value in browser cookies, so refer the jQuery cookies script in your application.

Now define a script function to store the expanded and selected TreeView nodes in variables respectively and assign the function to ClientSideOnNodeExpand, ClientSideOnNodeClick and ClientSideOnNodeCollapse events. Similarly define a function to restore the state of TreeView and assign it to ClientSideOnLoaded event. So that the TreeView changes are stored using the client-side events and restored from cookies.

CSHTML

Client-side JavaScript

Controller, C#

Refer the following online demo for references,

http://mvc.syncfusion.com/demos/ui/tools/TreeView/StatePersistence