Save the expanded state of the TreeNodes when the treeview is being bound upon each postback

13 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1679 posts
    Member since:
    Oct 2004

    Posted 11 Apr 2007 Link to this post

    Requirements

    r.a.d.controls version

    Q2 2011 RadTreeView AJAX
    Telerik.Web.UI 2011.

    .NET version

    4.0

    Visual Studio version

    2011

    programming language

    CS

    browser support

    all browsers supported by r.a.d.controls


     
    PROJECT DESCRIPTION

    This project shows how to keep the expanded state of r.a.d.treeview between postbacks when the treeview is being bound upon each postback.

    1. r.a.d.treeview is being bound in the Page_Load event.
    2. Expanded nodes are saved in a cookie in the OnClientNodeExpanded and OnClientNodeCollapsed client-side event of r.a.d.treeview.
    3. In the Page_Load event, the TreeNodes are expanded accordingly.

  2. Adrian
    Adrian avatar
    81 posts
    Member since:
    Aug 2006

    Posted 15 Apr 2007 Link to this post

    Are we able to have a .Net 1.1 version of this please. I am still developing in 1.1 and i am looking for how to retain the expanded state after ajax postbacks

    thanks
  3. Helen
    Admin
    Helen avatar
    1052 posts

    Posted 16 Apr 2007 Link to this post

    Hi,

    Please find attached a .net1 version of the project . Hope it will be helpful.

    Sincerely yours,
    Helen
    the telerik team

    Instantly find answers to your questions at the new telerik Support Center
  4. Dan
    Dan avatar
    15 posts
    Member since:
    Sep 2004

    Posted 05 Jul 2007 Link to this post

    The 1.1 project helped me out in the postback scenario where there are no updates to the treeview hierarchy.  I have a slightly different need.  I am using a Splitter control where 2 panes are working together.  The left pane is a rad treeview, when a node is clicked on the treeview the right pane is loaded with a form.  All is working correctly and I am now trying to update the treeview to reflect changes made on the form.  At the moment, I am reloading the entire treeview to reflect the updates.  There are 3 scenarios when I need to update the rad treeview based on a form action(Add, Delete and Update) of the right pane. 

    My questions:
    1.  In the Add and Delete scenarios, does the treeview have to be reloaded completely to reflect a new node or a removed node?

    2.  In the Update scenario, the text of the selected node item would be the name of the item on the form.  Such as a person's name.  The person's name can be updated on the form.  On the form update can the selected node's text be updated without reloading the entire treeview?

    3.  Storing state of expaned nodes.  In the case where a treeview has multiple levels in the node hierarchy and a node is added within the hierarchy, can the state of the treeview be saved so that when the node is added the treeview keeps its expanded state and the new node is displayed?
  5. Dan
    Dan avatar
    15 posts
    Member since:
    Sep 2004

    Posted 05 Jul 2007 Link to this post

    I've managed to get the scenario for the update working correctly accept for one thing.  I am using the following where the formNode is the value of the current selected node of the tree and newNode is the node with the updated information.

    RadTreeNode currFormNode = cachedTreeView.FindNodeByValue(formNode);

    int index = currFormNode.Index;

    cachedTreeView.Nodes.Insert(index, newNode);

    t.LoadXmlString(cachedTreeView.GetXml());

    Session["treeViewState"] = t.GetXml();


    When I view t.GetXml(), everything is correct.  Also the treeview displays the updated node correctly.  My issue happens on the t_NodeExpand event.  When this event is fired the custom attributes of the inserted node are missing. 

    My Question:
    Do I have to do anything additional to persist custom attributes when using the Insert node method?
  6. Dan
    Dan avatar
    15 posts
    Member since:
    Sep 2004

    Posted 11 Jul 2007 Link to this post

    I figured it out.  Turns out I needed to use ExpandMode.Serverside rather than ExpandMode.ServerSideCallBack.

    I'm using this now:
    newNode.ExpandMode = ExpandMode.ServerSide;

    I was using this before:
    newNode.ExpandMode = ExpandMode.ServerSideCallBack;

    I like the functionality of the SereverSideCallBack better, but was unable to get it to work.  Could someone point me to an article or reply with details as to how these two modes differ in implementation?

    My solution is working at the moment, but I'd like to make a treeview node level AJAX call when adding, updating or removing a node from the treeview.  Some of my treeviews are large and I'm thinking it would make for a more responsive UI if the entire treeview t.GetXml() didn't have to be loaded into a Session variable updated and rebound.

    Thanks for any additional info on this topic.

  7. Nikolay
    Admin
    Nikolay avatar
    3997 posts

    Posted 12 Jul 2007 Link to this post

    Hi Dan,

    The needed information can be found at:
    NodeClick event is not fired when ServerSideCallBack is used

    Also, you might check the following help article:
    Storing the expanded state of TreeNodes added via callback

    Kind regards,
    Nick
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  8. Dan
    Dan avatar
    15 posts
    Member since:
    Sep 2004

    Posted 12 Jul 2007 Link to this post

    Thanks for answering my followup question Nick.
  9. Michael
    Michael avatar
    1 posts
    Member since:
    Jul 2008

    Posted 28 Aug 2008 Link to this post

    Broken Download. Download stops after 80%.
    Please fix it.

    TreeviewStateMasterPages.zip
  10. Vidan
    Vidan avatar
    1 posts
    Member since:
    Mar 2009

    Posted 16 Mar 2009 Link to this post

    Thanks a lot!
    Huge help for me.
  11. Jason Hodges
    Jason Hodges avatar
    4 posts
    Member since:
    Nov 2004

    Posted 20 Aug 2009 Link to this post

    Still appears to be a broken download...

    (edit - after 5 minutes of trying, it's finally working)
  12. Jon Shipman
    Jon Shipman avatar
    43 posts
    Member since:
    Nov 2009

    Posted 12 Apr 2011 Link to this post

    I took a stab at updating this to 2011 Q2.  Here's what I came up with.  If anyone has any additional tips to add, or if there's another way to do this, please let me know!

    Javascript:

    function rtvExplore_OnNodeExpandedCollapsed(sender, eventArgs)
    {
        var allNodes = eventArgs._node.get_treeView().get_allNodes();
     
        var i;
        var selectedNodes = "";
     
        for (i = 0; i < allNodes.length; i++)
        {
            if (allNodes[i].get_expanded())
                selectedNodes += allNodes[i].get_value() + "*";
        }
     
        Set_Cookie("expandedNodes", selectedNodes, 30);
    }


    ASPX.  Note that you need to use both OnClientNodeExpanded and OnClientNodeCollapsed.

    <telerik:RadTreeView ID="RadTreeView1"
        runat="server"
        OnClientNodeExpanded="rtvExplore_OnNodeExpandedCollapsed"
        OnClientNodeCollapsed="rtvExplore_OnNodeExpandedCollapsed">
    </telerik:RadTreeView>


    C#

    Be sure to set the DataValueField when you're binding your data

    RadTreeView1.DataValueField = "TreeviewID";


    Page_Load

    HttpCookie cookie = Request.Cookies["expandedNodes"];
    if (cookie != null)
    {
        string[] expandedNodeValues = cookie.Value.Split('*');
        foreach (string nodeValue in expandedNodeValues)
        {
            RadTreeNode expandedNode = RadTreeView1.FindNodeByValue(HttpUtility.UrlDecode(nodeValue));
            if(expandedNode != null)
                expandedNode.Expanded = true;
        }
    }


    Note the "HttpUtility.UrlDecode(nodeValue)".  If you've used certain characters in your DataValueField, the value will get encoded and FindNodeByValue will not work.  I had used colons to stack the hierarchical IDs and use those for the DataValueField to create unique IDs.  The semicolon got encoded as "%3A".  HttpUtility.UrlDecode decodes this back to a ":" and finds the matching node.
  13. Steve
    Steve avatar
    1 posts
    Member since:
    Feb 2013

    Posted 21 Feb 2013 Link to this post

    I am very new to this.
    And I cant for the life of me work out how to keep the treeview state on postbacks or if I navigate through the site with the RadTreeView as a menu on each page.

    I have tried all examples on this page and nothing seems to work.
    I am simply loading the menu from an xml file in codebehind.


    HTML Code:

    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <telerik:RadTreeView ID="RadTreeView1" Runat="server"></telerik:RadTreeView>

    Codebehind:

    if (!Page.IsPostBack)
    {
    RadTreeView1.LoadContentFile("page.xml");
    }

    XML:

    <?xml version="1.0" encoding="utf-8" ?>
    <Tree>
      <Node Value="1" Text="Desktop" Expanded="True" ToolTip="Desktop" ImageUrl="~/TreeView/Img/Vista/desktop.png">
        <Node Value="2"  Text="Administrator" ImageUrl="~/TreeView/Img/Vista/folder-personal.png" Expanded="True">
          <Node Value="3" Text="AppData" >
            <Node Value="4" Text="Microsoft" />
          </Node>
          <Node Value="5" Text="Contacts" />
          <Node Value="6" Text="Downloads" />
          <Node Value="7" Text="Documents" Selected="True" />
          <Node Value="8" Text="Favorites" >
            <Node Value="9" Text="Links" />
          </Node>
          <Node Value="1" Text="Music"  />
          <Node Value="1" Text="Pictures"  />
          <Node Value="1" Text="Saved Games"  />
          <Node Value="1" Text="Searches"  >
            <Node Value="1" Text="History" />
          </Node>
          <Node Value="1" Text="Videos" />
        </Node>
        <Node Value="1" Text="Computer" ToolTip="My Computer" Expanded="True" >
          <Node Value="1" Text="WebServer (\\10.0.0.80) (W:)"  />
          <Node Value="1" Text="Local Disk (C:)"  Expanded="True" >
            <Node Value="1" Text="inetpub"  Expanded="True">
              <Node Value="1" Text="AdminScripts" ></Node>
            </Node>
          </Node>
        </Node>
      </Node>
    </Tree>
Back to Top