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

Thread is closed for posting
13 posts, 0 answers
  1. 63F75A2C-1F16-4AED-AFE8-B1BBD57646AD
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD avatar
    1572 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. C16664F5-7BD0-4895-8575-B3150EDD6E93
    C16664F5-7BD0-4895-8575-B3150EDD6E93 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. CEE486A7-FA5A-432A-A744-07A4F262C400
    CEE486A7-FA5A-432A-A744-07A4F262C400 avatar
    1052 posts
    Member since:
    Jan 2017

    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. 8173980E-CE23-4314-99E7-93075FD9A204
    8173980E-CE23-4314-99E7-93075FD9A204 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. 8173980E-CE23-4314-99E7-93075FD9A204
    8173980E-CE23-4314-99E7-93075FD9A204 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. 8173980E-CE23-4314-99E7-93075FD9A204
    8173980E-CE23-4314-99E7-93075FD9A204 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. 19646D24-82B2-48BE-8363-68015F20812F
    19646D24-82B2-48BE-8363-68015F20812F avatar
    3997 posts
    Member since:
    Jan 2017

    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. 8173980E-CE23-4314-99E7-93075FD9A204
    8173980E-CE23-4314-99E7-93075FD9A204 avatar
    15 posts
    Member since:
    Sep 2004

    Posted 12 Jul 2007 Link to this post

    Thanks for answering my followup question Nick.
  9. 41CD154F-5DCA-4A21-BC0A-0E1508617684
    41CD154F-5DCA-4A21-BC0A-0E1508617684 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. 4023B2D6-8193-4820-803E-5B8B63D1DADE
    4023B2D6-8193-4820-803E-5B8B63D1DADE avatar
    1 posts
    Member since:
    Mar 2009

    Posted 16 Mar 2009 Link to this post

    Thanks a lot!
    Huge help for me.
  11. 5862161F-3331-49D2-B0D3-DE610AA0540D
    5862161F-3331-49D2-B0D3-DE610AA0540D 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. 1B52FB95-E42A-40E4-88A4-8B7BC7724C74
    1B52FB95-E42A-40E4-88A4-8B7BC7724C74 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. 2159AFA3-FD71-415D-AEA5-018C321AEEAD
    2159AFA3-FD71-415D-AEA5-018C321AEEAD 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

This Code Library is part of the product documentation and subject to the respective product license agreement.