[Solved] Unable to persist treeview state between requests

[Jatin]

Hi,
   I am trying to persist treeview state between requests, specifically maintaining expanded nodes of the treeview. I was following the article here . Unfortunately, I am still not getting the required behavior. Sometimes the nodes are expanded/collapsed correctly, while at other times not. I couldn't identify a specific pattern for this behavior. I would need a little help here. Below is the code that I am using.

TreeMenu.sitemap (the sitemap file)

<?xml version="1.0" encoding="utf-8" ?>
<siteMap>
    <siteMapNode title="Home" >
        <siteMapNode title="Customer">
            <siteMapNode controller="Customer" action="CustomerMain" title="Customer Main" />
            <siteMapNode controller="Customer" action="CustomerSearch" title="Customer Search" />
        </siteMapNode>
        <siteMapNode title="Order">
            <siteMapNode controller="Order" action="OrderList" title="Order List" />
        </siteMapNode>
        <siteMapNode title="DropDown List">
            <siteMapNode controller="DropDown" action="GetAllCustomers" title="Cascading Dropdown" />
        </siteMapNode>
        <siteMapNode title="User Management">
            <siteMapNode controller="Account" action="UserList" title="List Users" />
            <siteMapNode controller="Account" action="Register" title="Create New User" />
        </siteMapNode>
    </siteMapNode>
</siteMap>

TreeMenu.chstml (contains treeview)

@(Html.Telerik().TreeView()
           .Name("tree-menu")
           .ShowLines(false)
           .BindTo("treemenu", (item, siteMapNode) => {
                    item.Expanded = ((string[])ViewData["ExpandedNodes"]).Contains(item.Text);
            })

           .ClientEvents(events => {
               events.OnCollapse("updateTreeViewState");
               events.OnExpand("updateTreeViewState");
           })
)


<script type="text/javascript">

    function updateTreeViewState(e) {

        var expandedNodes = $.cookie('ExpandedNodes');
        expandedNodes = expandedNodes ? expandedNodes.split(';') : [];

        var expandedNodeText = $('#tree-menu').data('tTreeView').getItemText(e.item);
        var itemIndex = -1

        for (var i = 0; i < expandedNodes.length; i++) {
            if (expandedNodes[i] == expandedNodeText) {
                itemIndex = i;
            }
        }

        if (e.type == "expand" && itemIndex == -1) {
            expandedNodes.push(expandedNodeText);
        }
        else if (e.type == "collapse" && itemIndex >= 0) {
            expandedNodes.splice(itemIndex, 1);
        }

        $.cookie('ExpandedNodes', expandedNodes.join(';'));
    }

</script>

BaseController (for setting ViewData["ExpandedNodes"]

public class BaseController : Controller
{
    protected override void OnActionExecuting(ActionExecutingContext filterContext) {

        base.OnActionExecuting(filterContext);

        ViewData["ExpandedNodes"] = Request.Cookies["ExpandedNodes"] != null ?
                            HttpUtility.UrlDecode(Request.Cookies["ExpandedNodes"].Value).Split(';')
                            : new string[] { };

    }
}

thanks,
Nirvan

[Jatin]

The jquery code for setting the cookie was setting multiple cookies of same name ("ExpandedNodes"), instead of single "ExpandedNodes" cookie. I replaced the code using pure javascript. Also the delimiter ";" for various expanded nodes text had to be changed to "," instead. The ";" delimiter was causing trouble so had to change. The expanded nodes and selected node is now able to maintain its state between requests.

regards,
Nirvan.