NodeCollapse

[Joris Lambrechts]

Hi,

First of all, great product!

I've been using the TreeView for a project as the main navigation control. Everything works fine, only one issue left: saving the state when a node collapses. I've applied the code that was in an example that I found here, which uses the session-object and stores the state when a node expands. 

My problem has been here before and some solutions were given:

1. Use an AjaxPanel and register the client node collapse event and when that occurs
2. Use an AjaxPanel and put the TreeView in that panel and set expand mode to server side

None of those solutions gave my a proper result. The first method made the ajax call @ random. The second method worked BUT only on Windows Server 2003. When I deployed my solution on to another test server running Windows Server 2008, I could only expand or collapse once. After I did that, I couldn't expand or collapse any other node.

I also tried to get the state of all the nodes on the client side, node per node, for using an ajax call to send a 2D javascript array with with the ID & Expand state in. But I could not access the nodes of the treeview, AllNodes property returned undefined.

I really would like to save the state (without a page reload) of the treeview in the session after a node collapse, just like it is possible on a node expanding.

Hopefully someone figured this one out, and share it here!

Joris

[Yana]

Hello Joris,

Could you please tell us which example exactly you're using? Or you can paste some sample code here. Thanks

Kind regards,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Joris Lambrechts]

Hi Yana,

I used code from this example: http://www.telerik.com/ClientsFiles/119161_treeviewstateinmasterpage.zip which was provided in thread http://www.telerik.com/community/forums/aspnet-ajax/treeview/radtreeview-state.aspx.

The code I use now is:

using System;
using System.Web;
using System.Web.UI;
using System.Web.Security;
using System.Configuration;
using System.Web.UI.WebControls;
using System.Security.Principal;
using System.Web.UI.HtmlControls;
using System.Collections.Generic;
using Microsoft.SharePoint;
using Microsoft.SharePoint.Utilities;
using Telerik.Web.UI;

namespace Navigation
{

    public partial class VisualizerControl : System.Web.UI.UserControl
    {
        private string CurrentWeb
        {
            get
            {
                return SPContext.Current.Web.Title;
            }
        }

        private IPrincipal CurrentUser
        {
            get
            {
                return this.Page.User;
            }
        }

        private void DoInitialTreeDataBinding()
        {
            NavigationHelper myHelper = new NavigationHelper(SPContext.Current, CurrentUser, "Navigation User", "Navigation System", "Navigation Guest");
            rtvNavigationVisualizer.DataTextField = "Title";
            rtvNavigationVisualizer.DataFieldID = "Id";
            rtvNavigationVisualizer.DataFieldParentID = "ParentId";
            rtvNavigationVisualizer.DataNavigateUrlField = "NavigateUrl";
            rtvNavigationVisualizer.DataValueField = "Id";
            rtvNavigationVisualizer.DataSource = myHelper.getNavigationDataSource(false);
            rtvNavigationVisualizer.DataBind();

            Session[NavigationSessionKeys.TreeViewState.ToString()] = rtvNavigationVisualizer.GetXml();
            Session[NavigationSessionKeys.CurrentWeb.ToString()] = CurrentWeb;
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            try
            {
                string treeViewState = (string)Session[NavigationSessionKeys.TreeViewState.ToString()];
                string sessionWeb = (string)Session[NavigationSessionKeys.CurrentWeb.ToString()];

                bool doBinding = false, selectFirstNode = false;

                if (!IsPostBack && (String.IsNullOrEmpty(treeViewState) || String.IsNullOrEmpty(sessionWeb)))
                {
                    doBinding = true;
                }
                else
                {
                    if (!String.IsNullOrEmpty(treeViewState))
                    {
                        // Check for same subsite
                        if (!sessionWeb.Equals(CurrentWeb))
                        {
                            // if not on the same subsite, reload menu
                            doBinding = true;
                        }
                        else
                        {
                            //this is a new visit of the subsite so we have to set the session object again
                            rtvNavigationVisualizer.LoadXml(treeViewState);
                        }
                    }
                }

                if (doBinding)
                    DoInitialTreeDataBinding();

                // Check if we are on the Forum
                if (SPContext.Current.Web.ID != SPContext.Current.Site.RootWeb.ID)
                {
                    // If the request goes to the default.aspx on a Dossier,
                    // we redirect to the first node with a navigation url;
                    if (this.Page.Request.Url.OriginalString.EndsWith("default.aspx"))
                    {
                        selectFirstNode = true;
                    }
                }

                if (!IsPostBack)
                {
                    string relativeRequestUrl = this.Page.Request.RawUrl.Replace("%20", " ").TrimStart('/');
                    string siteUrl = SPContext.Current.Site.Url.TrimEnd('/');
                    string url = siteUrl + "/" + relativeRequestUrl;

                    RadTreeNode nodeByUrl = GetNodeByUrl(null, url);
                    if (nodeByUrl != null)
                    {
                        if (nodeByUrl != rtvNavigationVisualizer.SelectedNode)
                        {
                            SelectNode(nodeByUrl, false);
                        }

                        selectFirstNode = false;
                    }
                    else if (rtvNavigationVisualizer.SelectedNode != null)
                        rtvNavigationVisualizer.SelectedNode.Selected = false;

                    Session[NavigationSessionKeys.TreeViewState.ToString()] = rtvNavigationVisualizer.GetXml();
                }

                if (selectFirstNode && rtvNavigationVisualizer.Nodes.Count > 0)
                    SelectFirstNode(rtvNavigationVisualizer.Nodes[0], true);

                lblMessage.Visible = false;
            }
            catch
            {
                lblMessage.Text = "Unexpected error, please contact the administrator!";
                lblMessage.Visible = true;
            }
        }

        private RadTreeNode GetNodeByUrl(RadTreeNode parentNode, string url)
        {
            if (parentNode == null)
            {
                foreach (RadTreeNode node in rtvNavigationVisualizer.Nodes)
                {
                    RadTreeNode foundNode = GetNodeByUrl(node, url);
                    if (foundNode != null)
                        return foundNode;
                }

                return null;
            }
            else
            {
                foreach (RadTreeNode childNode in parentNode.Nodes)
                {
                    RadTreeNode foundNode = GetNodeByUrl(childNode, url);
                    if (foundNode != null)
                        return foundNode;
                }

                string text = parentNode.Text;
                if (parentNode.NavigateUrl.ToLower() == url.ToLower())
                    return parentNode;

                return null;
            }
        }

        private void SelectFirstNode(RadTreeNode treeNode, bool urlRequired)
        {
            if (treeNode == null)
                throw new ArgumentException("treeNode");

            if (treeNode.Nodes.Count > 0)
                foreach(RadTreeNode childTreeNode in treeNode.Nodes)
                    SelectFirstNode(childTreeNode, urlRequired);

            if (urlRequired && !string.IsNullOrEmpty(treeNode.NavigateUrl))
            {
                SelectNode(treeNode, true);
            }
        }

        private void SelectNode(RadTreeNode treeNode, bool doRedirect)
        {
            if (treeNode == null)
                throw new ArgumentException("treeNode");

            RadTreeNode parent = treeNode.Parent as RadTreeNode;
            while (parent != null)
            {
                parent.ExpandMode = TreeNodeExpandMode.ClientSide;
                parent.Expanded = true;
                parent = parent.Parent as RadTreeNode;
            }

            rtvNavigationVisualizer_NodeClick(null, new RadTreeNodeEventArgs(treeNode));

            if (doRedirect)
            {
                Response.Redirect(treeNode.NavigateUrl);
            }
        }

        protected void rtvNavigationVisualizer_NodeDataBound(object sender, Telerik.Web.UI.RadTreeNodeEventArgs e)
        {
            if (e.Node.ParentNode != null)
                e.Node.ParentNode.ExpandMode = TreeNodeExpandMode.ServerSideCallBack;

            e.Node.ToolTip = (e.Node.DataItem as NavigationHelper.NavigationItem).Description;
        }

        protected void rtvNavigationVisualizer_NodeExpand(object sender, RadTreeNodeEventArgs e)
        {
            string treeViewState = (string)Session[NavigationSessionKeys.TreeViewState.ToString()];
            RadTreeView cachedTreeView = new RadTreeView();
            cachedTreeView.LoadXmlString(treeViewState);

            RadTreeNode cachedNodeClicked = cachedTreeView.FindNodeByValue(e.Node.Value);
            cachedNodeClicked.ExpandMode = TreeNodeExpandMode.ClientSide;
            cachedNodeClicked.Expanded = true;

            Session[NavigationSessionKeys.TreeViewState.ToString()] = cachedTreeView.GetXml();
        }

        protected void rtvNavigationVisualizer_NodeCollapse(object sender, RadTreeNodeEventArgs e)
        {
            string treeViewState = (string)Session[NavigationSessionKeys.TreeViewState.ToString()];
            RadTreeView cachedTreeView = new RadTreeView();
            cachedTreeView.LoadXmlString(treeViewState);

            RadTreeNode cachedNodeClicked = cachedTreeView.FindNodeByValue(e.Node.Value);
            cachedNodeClicked.ExpandMode = TreeNodeExpandMode.ClientSide;
            cachedNodeClicked.Expanded = false;

            Session[NavigationSessionKeys.TreeViewState.ToString()] = cachedTreeView.GetXml();
        }

        protected void rtvNavigationVisualizer_NodeClick(object sender, RadTreeNodeEventArgs e)
        {
            if (!string.IsNullOrEmpty(e.Node.NavigateUrl))
            {

                e.Node.Selected = true;
            }

            Session[NavigationSessionKeys.TreeViewState.ToString()] = rtvNavigationVisualizer.GetXml();
        }

    }
}

[Yana]

Hi Joris,

Have you tried the OnNodeCollapse event handler from the example:

protected void RadTreeView1_NodeCollapse(object sender, RadTreeNodeEventArgs e)
{
     RadTreeView tree = (RadTreeView)sender;
     Session["treeViewState"] = tree.GetXml();
}

It works at our side without a problem.

Regards,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Joris Lambrechts]

I removed the scriptmanager at an earlier stage, but by adding it back it works. Stupid thing to do...

I'm using the test example I mentioned before, but it have a behavior I want to alter: After a ServerSideCallBack, the expanded node has its expand mode set to ServerSide and when the node collapses, the page reloads. I want to have the same behavior as with the node expanding, an ajax callback and not having to reload the page again. Is that possible using only the treeview?

If I set the expand mode of an expanded node to ServerSideCallBack, and I do a refresh of the page, the nodes that are expanded, show a "+" instead of "-".

Thanks for the help

[Yana]

Hi Joris,

I suggest you use only ServerSide ExpandMode and place the treeview inside RadAjaxPanel in order to prevent full page postback. Please try this and let us know how it goes.

All the best,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Joris Lambrechts]

Hi,

I've managed to get it working using a RadAjaxManager. I used the client node collapse event to send an ajax request to the server containing the node id that collapsed. Then I got the state of the treeview out of the session object, applied the changes and saved the state of the treeview in the session object again. 

I tested it on Windows Server 2003. Due to some problems with SharePoint, our solution and Windows Server 2008, I didn't tested it on that OS.

When my colleague has tested it on Windows Server 2008, I'll let you know.

Thanks for the help!

[Joris Lambrechts]

double post, sorry 

[Yana]

Hi Joris,

I'm glad you could find a solution.

Kind regards,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.