Using the RadTreeView as the App's Menu

[Robert]

I've successfully built a sophisticated web page using the RadTreeView as the primary navigation tool for that page.  It works great and in the process I learned a great deal about your excellent control.

Now looking at my overall app, I've come to the conclusion that the Microsoft Treeview is insufficient to serve as the left navigation menu for the entire app - ie. it just doesn't work properly!

So I want to convert things over to use the RadTreeView for this menu instead.

My web app uses a ASP.Net 2.0 Master Page, on which the navigation menu resides.

I'm curious to know whether there is a simple way to keep the node settings (ie. which are open and which are closed) when the app jumps from page to page.  I *think* I know of an elaborate way to do this but was hoping there would be a documented simple approach.

Sincerely,

Robert W.

[Paul]

Hi rmdw,

Please find below a sample code snippet that shows the needed approach.

MasterPage.master

<form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadTreeView ID="RadTreeView1" runat="server">
            <Nodes>
                <telerik:RadTreeNode runat="server" Text="Root RadTreeNode1">
                    <Nodes>
                        <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1" NavigateUrl="Default.aspx">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 2" NavigateUrl="Default2.aspx">
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
            </Nodes>
            <CollapseAnimation Type="OutQuint" Duration="100"></CollapseAnimation>
            <ExpandAnimation Duration="100"></ExpandAnimation>
        </telerik:RadTreeView>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
</form>

Code-behind:

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Telerik.Web.UI;

public partial class MasterPage : System.Web.UI.MasterPage
{
    protected void Page_Load(object sender, EventArgs e)
    {
        RadTreeNode myNode = (RadTreeNode)RadTreeView1.FindNodeByUrl(Request.Url.PathAndQuery);
        myNode.ExpandParentNodes();
        myNode.Selected = true;
    }
}

Best wishes,
Paul
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Robert]

Paul,

Reading through your code, I don't see how that could possibly solve my problem.  Perhaps I didn't explain things properly.  I'll try again:

Let's say that a menu on Page 1 is in this state:

+ Top-Level A (3 sub-items but currently closed)
-  Top-Level B
       - Bottom-Level B1
       - Bottom Level B2
+ Top-Level C (4 sub-items but currently closed)
-  Top-Level D
       - Bottom-Level D1
       - Bottom Level D2
       - Bottom-Level D3
       - Bottom Level D4

Now, let's say that I click on "Bottom-Level D3" and it takes me to Page 2.  How does your code ensure that the menu on Page 2 will look identical to that shown above?  In other words, by what mechanism will the status be restored to precisely what was on Page 1?

Robert

[Atanas Korchev]

Hi rmdw,

The code we've send you would find the node corresponding to the current url and then make it visible by expanding its parents. Indeed any other expanded nodes from the previous page will be lost. If persisting the exact same state is mandatory you can use a different approach:

1. Do not use the NavigateUrl property. Store the url in the Value property of the node instead.
2. Subscribe to the NodeClick event of your RadTreeView.
3. In the NodeClick event handler store the treeview state in the session and then navigate to the required page:
   
   Session["TreeViewState"] = RadTreeView1.GetXml();
   Response.Redirect(e.Node.Value);
4. In your Page_Load use the LoadXml method to restore the treeview state:
   
   RadTreeView1.LoadXml((string)Session["TreeViewState])

I hope this helps,
Albert
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Robert]

Albert,

Yes, this is more akin to what I need.  I've just implemented your code.  However, my testing reveals that GetXml() always returns the same 8-character string:

                             "<Tree />"

What happened to the rest of the tree's string?  Is there a known bug with this method?

Robert

[Atanas Korchev]

Hello rmdw,

There are no known issues with the GetXml method. Getting "<Tree />" means that the treeview is empty (has no nodes) when the GetXml method is called.

Regards,
Albert
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center