This is a migrated thread and some comments may be shown as answers.

[Solved] Tree View Maintain state After Update

5 Answers 311 Views

TreeView

This is a migrated thread and some comments may be shown as answers.

Jim asked on 18 Jun 2008, 04:50 PM

I have an issue I need some help with. I have a CMS that uses the Rad TreeView to show all of the page titles, values, etc. I have a panel that sits to the left of that the controls different functions of those pages. The TreeView is loaded via a ServerSideCallBack. So the root nodes are loaded, when expanded it makes a call to a database to get all of the child noeds. That works great. But if I select a node and want to move it up lets say. The database get updated successfully, but the state of the TreeView is still the same. Is there a way to click the "Move Up" button, update the database, then reload and expand the parent of the selected node? So basically it would rebuild the tree, and on a callback it would call the AddChildNodes for the selected node in the tree and expand it. Is this possible?

Thank you.

5 Answers, 1 is accepted

answered on 23 Jun 2008, 11:18 AM

Hello Jim,

Thank you for writing to us.

As far as I understand you update the TreeView using AJAX when the 'Move Up' button is clicked - the database is updated to reflect the changes in the structure of the control, then the control is rebound. However, the state of the TreeView does not get updated. Is this the problem?

If so, you should:

put the TreeView along with the 'Move Up' button in one update panel, if you are using Update/RadAjax Panels

if you are using the RadAjaxManager, you should configure it appropriately, so that the 'Move Up' button is an initiator of the AJAX callback and the TreeView is the updated target control.

If this is not the case, could you elaborate on the exact method of updating the TreeView?

All the best,
Simon
the Telerik team

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

answered on 23 Jun 2008, 12:49 PM

I have done all of this. The tree does update, but I want the tree to expand to the state in which I was moving that level of node. For example, let's say I expand 4 levels deep in a tree. And in that level there are 5 nodes.

Level1
    -Level 1.1
    -Level 1.2
        -Level 2
        -Level 3
            -Level 3.1
            - Level 3.2
                -Level 4
                    -Level 5
                        -Level 5.1
                        -Level 5.2
                        - Level 5.3
                        -Level 5.4
                        -Level 5.5

And I want to be able to move Level 5.5 above Level 5.3. So I would need to click the move up button twice. But the issue is, I hit it once, it moves above level 5.4 and the tree closes back to the root nodes. So then I need to expand it back to the 5th level. So is that a way to maintain state and update both server and client side so I can just click the move up button twice?

answered on 25 Jun 2008, 06:30 PM

As I mentioned. The entire tree is not loaded. Root nodes are loaded on a page load, then child nodes are loaded via a nodeexpand. But if I want to move a node up in a tree branch I hit the Move Up button, and the tree reloads with all nodes collapsed. How can I make it say open to the branch that I'm working with? Below is the front end code.

@ Page Language="C#" MasterPageFile="~/Admin.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Admin_CMS_Default2" Title="Untitled Page" %>

@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %>

@ Register TagPrefix="rad" Namespace="Telerik.WebControls" Assembly="RadTreeView.NET2" %>

@ Register Assembly="RadWindow.Net2" Namespace="Telerik.WebControls" TagPrefix="rad" %>

@ Register Src="~/UserControls/Login.ascx" TagName="login" TagPrefix="UC" %>

@ Register namespace="AjaxControlToolkit" assembly="AjaxControlToolkit" tagPrefix="ajaxToolkit" %>

@ Register Assembly="RadAjax.Net2" Namespace="Telerik.WebControls" TagPrefix="radA" %>

asp:Content ID="Content1" ContentPlaceHolderID="cphHeader" Runat="Server">Pages Admin : Tree View</asp:Content>

asp:Content ID="Content2" ContentPlaceHolderID="cphContent" Runat="Server">

script language="javascript" type="text/javascript">

function

CollapseAll()

{

var i;

for (i=0; i<<%=RadTreeView1.ClientID %>.AllNodes.length; i++)

{

var node = <%=RadTreeView1.ClientID %>.AllNodes[i];

node.UnSelect();

var nodeElement = node.TextElement();

if(node.Category != "Parent"){

nodeElement.className=

"TreeNode";

node.NodeCss=

"TreeNode";

}

if (node.Nodes.length > 0)

{

node.Collapse();

}

RadTreeView_AfterClientToggle(node);

}

var a;

for (a=0; a<<%=RadTreeView2.ClientID %>.AllNodes.length; a++)

{

var node = <%=RadTreeView2.ClientID %>.AllNodes[a];

node.UnSelect();

var nodeElement = node.TextElement();

if(node.Category != "Parent"){

nodeElement.className=

"TreeNode";

node.NodeCss=

"TreeNode";

}

if (node.Nodes.length > 0)

{

node.Collapse();

}

RadTreeView_AfterClientToggle(node);

}

var imgMoveDown = document.getElementById('<%=imgMoveDown.ClientID %>');

imgMoveDown.src=

'<%= Request.ApplicationPath != "/" ? Request.ApplicationPath : "" %>/Images/Icons/Move_Down.jpg';

var imgMoveUp = document.getElementById('<%=imgMoveUp.ClientID %>');

imgMoveUp.src=

'<%= Request.ApplicationPath != "/" ? Request.ApplicationPath : "" %>/Images/Icons/Move_Up.jpg';

}

function

RadTreeView_AfterClientToggle(node)

{

if((node.Expanded==true)&&(node.Category != "Parent")){

node.NodeCss=

"SubNode";

node.NodeCssOver=

"SubNode";

}

else if(node.Category == "Parent")

{

node.NodeCss=

"ParentNode";

node.NodeCssOver=

"ParentNode";

}

else

{

node.NodeCss=

"TreeNode";

node.NodeCssOver=

"TreeNodeOver";

}

function

SelectNode(node)

{

var i;

for (i=0; i<<%=RadTreeView1.ClientID %>.AllNodes.length; i++)

{

var nodeCheck = <%=RadTreeView1.ClientID %>.AllNodes[i];

nodeCheck.UnSelect();

}

for (i=0; i<<%=RadTreeView2.ClientID %>.AllNodes.length; i++)

{

var nodeCheck = <%=RadTreeView2.ClientID %>.AllNodes[i];

nodeCheck.UnSelect();

}

var text = document.getElementById('<%=txtHidden.ClientID %>');

var PAG_ID = document.getElementById('<%=txtHiddenPAG_ID.ClientID%>');

var PAG_DEP_ID = document.getElementById('<%=txtHiddenPAG_DEP_ID.ClientID%>');

var PAG_ParentID = document.getElementById('<%=txtHiddenPAG_ParentID.ClientID%>');

var PAG_Max = document.getElementById('<%=txtHiddenPAG_Max.ClientID%>');

var PAG_Min = document.getElementById('<%=txtHiddenPAG_Min.ClientID%>');

var PAG_Order = document.getElementById('<%=txtHiddenPAG_Order.ClientID%>');

var PAG_Title = document.getElementById('<%=lblSelectedPage.ClientID %>');

var View_Link = document.getElementById('<%=lnkView.ClientID %>');

var MoveLive_Link = document.getElementById('<%=lnkMoveLive.ClientID %>');

var Edit_Link = document.getElementById('<%=lnkEdit.ClientID %>');

var AddSubpage_Link = document.getElementById('<%=lnkAddSubpage.ClientID%>');

var Page_Link = document.getElementById('<%=lblLinkToPage.ClientID%>');

var Image_Down = document.getElementById('<%=imgMoveDown.ClientID %>');

var Image_Up = document.getElementById('<%=imgMoveUp.ClientID %>');

text.value = node.Text;

PAG_ID.value = node.Value;

PAG_DEP_ID.value = node.Attributes[

"PAG_DEP_ID"];

PAG_ParentID.value = node.Attributes[

"PAG_ParentID"];

PAG_Max.value = node.Attributes[

"PAG_Max"];

PAG_Min.value = node.Attributes[

"PAG_Min"];

PAG_Order.value = node.Attributes[

"PAG_Order"];

PAG_Title.innerHTML = node.Text;

View_Link.href=

"javascript:function anon(){{window.radopen('ViewContent.aspx?PAG_ID=" + node.Value + "','ViewContents');}};anon();";

MoveLive_Link.href=

"javascript:function anon(){{window.radopen('MoveLive.aspx?PAG_ID=" + node.Value + "','MoveLive');}};anon();";

Edit_Link.href= originalAttribute="href" originalPath=""

"javascript:function anon(){{window.radopen('Edit_Choose.aspx?PAG_ID=" + node.Value + "&DEP_ID="+ PAG_DEP_ID.value +"','Edit');}};anon();";

AddSubpage_Link.href=

"Edit.aspx?PAG_ParentID=" + node.Value + "&DEP_ID=" + PAG_DEP_ID.value;

Page_Link.innerHTML =

'<%=System.Configuration.ConfigurationManager.AppSettings["Searcharoo_VirtualRoot"].ToString()%>View.aspx?PAG_ID=' + node.Value;

if (PAG_Max.value.replace(/^\s+|\s+$/g,"") == PAG_Order.value.replace(/^\s+|\s+$/g,""))

{

Image_Down.src= originalAttribute="src" originalPath=""

'../../Images/Icons/Move_Down_disable.jpg';

Image_Down.disabled =

true;

}

else

{

Image_Down.src= originalAttribute="src" originalPath=""

"../../Images/Icons/Move_Down.jpg";

Image_Down.disabled =

false;

}

if (PAG_Min.value.replace(/^\s+|\s+$/g,"") == PAG_Order.value.replace(/^\s+|\s+$/g,""))

{

Image_Up.src= originalAttribute="src" originalPath=""

"../../Images/Icons/Move_Up_disable.jpg";

Image_Up.disabled =

true;

}

else

{

Image_Up.src= originalAttribute="src" originalPath=""

"../../Images/Icons/Move_Up.jpg";

Image_Up.disabled =

false;

}

function Confirm_Delete()

{

var PAG_Title = document.getElementById('<%=lblSelectedPage.ClientID %>');

radconfirm(

"Are you sure you want to delete the page " + PAG_Title.innerHTML + "?", event);

}

script>

rad:RadWindowManager ID="RadWindowManager1" runat="server" Skin="Office2007">

<rad:RadWindow ID="ViewContents"

Modal = "true"

Runat="server"

Width="600px"

Height="400px" />

<rad:RadWindow ID="MoveLive"

Modal = "true"

Runat="server"

Width="600px"

Height="400px" />

<rad:RadWindow ID="Edit"

Modal = "true"

Runat="server"

Width="600px"

Height="400px" />

</Windows>

rad:RadWindowManager>

UC:login ID="login1" runat="server" />

asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

<radA:RadAjaxManager ID="RadAjaxManager1" runat="server">

<radA:AjaxSetting AjaxControlID="imgMoveUp">

<radA:AjaxUpdatedControl ControlID="RadTreeView1" LoadingPanelID="LoadingPanel1"/>

</UpdatedControls>

</radA:AjaxSetting>

</AjaxSettings>

radA:RadAjaxManager>

radA:AjaxLoadingPanel ID="LoadingPanel1" runat="server" Style="width: 320px; padding-top: 125px;" Height="75px" Width="75px">

</radA:AjaxLoadingPanel>

<asp:TextBox ID="txtHidden" runat="server" style="display:none;"></asp:TextBox>

PAG_ID:

<asp:TextBox ID="txtHiddenPAG_ID" runat="server" Width="300"></asp:TextBox><br />

PAG_DEP_ID:

<asp:TextBox ID="txtHiddenPAG_DEP_ID" runat="server" Width="300"></asp:TextBox><br />

PAG_ParentID:

<asp:TextBox ID="txtHiddenPAG_ParentID" runat="server" Width="300"></asp:TextBox><br />

PAG_Max:

<asp:TextBox ID="txtHiddenPAG_Max" runat="server" Width="300"></asp:TextBox><br />

PAG_Min:

<asp:TextBox ID="txtHiddenPAG_Min" runat="server" Width="300"></asp:TextBox><br />

PAG_Order:

<asp:TextBox ID="txtHiddenPAG_Order" runat="server" Width="300"></asp:TextBox><br />

<asp:Label ID="lblMessage" runat="server" Text="" ForeColor="Red" Font-Bold="true" />

<tr>

</tr>

<tr>

<rad:RadTreeView ID="RadTreeView2" runat="server" OnNodeExpand="RadTreeView2_NodeExpand" Skin="Telerik"

ShowLineImages="true" DragAndDrop="true" AutoPostBack="false" DragAndDropBetweenNodes="true" BeforeClientClick="SelectNode" AfterClientToggle="RadTreeView_AfterClientToggle" >

</rad:RadTreeView>

</td>

</tr>

<tr>

</tr>

<tr>

<rad:RadTreeView ID="RadTreeView1" runat="server" OnNodeExpand="RadTreeView1_NodeExpand" Skin="Telerik"

ShowLineImages="true" DragAndDrop="true" DragAndDropBetweenNodes="true" BeforeClientClick="SelectNode" AfterClientToggle="RadTreeView_AfterClientToggle" >

</rad:RadTreeView>

</td>

<asp:Panel ID="pnlToolPanel" runat="server">

<tr>

</tr>

<tr>

</tr>

<tr>

<asp:Label ID="lblLinkToPage" runat="server" CssClass="ControlLink"></asp:Label>

</td>

</tr>

<tr>

<tr>

<td>

<tr>

</tr>

<tr>

<td nowrap>Close Pages</td>

</tr>

</table>

</td>

<td>

<tr>

</tr>

<tr>

</tr>

</table>

</td>

<td>

<tr>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

<tr>

</tr>

<tr>

</tr>

</table>

</td>

Annie Page Controls

</td>

<td>

<tr>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

<td>

<tr>

</tr>

<tr>

</tr>

</table>

</td>

<td>

<tr>

</tr>

<tr>

<td nowrap>Add Subpage</td>

</tr>

</table>

</td>

<td>

<tr>

</tr>

<tr>

<td nowrap>Delete Page</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

</asp:Panel>

<ajaxToolkit:AlwaysVisibleControlExtender ID="avcToolPanel" runat="server"

TargetControlID="pnlToolPanel"

VerticalSide="Top"

VerticalOffset="100"

HorizontalSide="Right"

HorizontalOffset="100"

ScrollEffectDuration=".1"/>

</radA:RadAjaxPanel>

</td>

</tr>

</table>

asp:Content>

Thanks