ajax timercontrols: treeview

Showing posts with label treeview. Show all posts

Wednesday, March 28, 2012

Tree view nested in Accordion taking two clicks to fire selectedNodeChanged event

I have a treeview in one of my accordion panes. When I click on a node for the first time, instead of firing the selectedNodeChanged event, it just goes through a normal postback. However the second time I click it, the event is fired correctly. Is there another event being fired that I'm not seeing?

Here's a trimed down version of the code. Thanks for any ideas. -d

<atlasToolKit:Accordion ID="navAccordion" runat="server" Height="410"
FadeTransitions="true" FramesPerSecond="40"
TransitionDuration="250"
AutoSize="None"
>

<atlasToolKit:AccordionPane ID="AccordionPane2" runat="server">
<Header><a href="http://links.10026.com/?link=" onclick="return false;" class="accordionLink">Tank Groups</a></Header>
<Content>
<asp:Panel ID="navPanel" runat="server" ScrollBars="auto" CssClass="extraPadding" BackColor="white" Width="180" Height="200">
<asp:TreeView ID="navTankGroups" OnUnload="nav_Unload" OnSelectedNodeChanged="nav_SelectedNodeChanged" runat="server" SkinID="nav" >
<Nodes>
<asp:TreeNode Text="Page 1" Value="~/page1.aspx" />
<asp:TreeNode Text="Page 2" Value="~/page2.aspx" />
</Nodes>
</asp:TreeView>
</asp:Panel>
</Content>
</atlasToolKit:AccordionPane>
</atlasToolKit:Accordion>

Here's the selectedNodeChanged routine.

Protected Sub nav_selecedNodeChanged(ByVal sender As Object, ByVal e As EventArgs)
Dim navTankGroups As TreeView = CType(AccordionPane2.ContentContainer.FindControl("navTankGroups"), TreeView)
If Not navSchedule.SelectedNode.ValuePath = String.Empty Then
Response.Redirect(navTankGroups.SelectedNode.Value)
End If
End Sub

This appears to only be an issue on master pages. I placed the accordion in a new page and it worked fine. Anyone have an idea on why it is taking two clicks in the masterpages? -d

Hi dtamber,

I'm not sure what's going on with this... could you perhaps post the simplest possible version you have that still causes the problem?

Thanks,
Ted

Look at the source code before and after the button click, there is one of 2 possibilities.

1. someting being created dynamicly doesn't have an ID property set, in this case you'll see the treeview control in the source with different names

Like ctl03 and ctl05 in the treeview's name

2. I have fixed my postback issues by adding a hidden field to each accordion pane at page_init. I don't know why this fixes the erradic behavior, but it does.

Let me know if either of these works.

Chris

I think this needs a bump.

I just tried using an accordion in a usercontrol and added 3 panes, each containing an updatepanel containing a button.

The button click event is not fired. Adding a hidden field as Chris suggested allows the click event to fire.

Nathan

I also ran into the exact same problem. I was using a gridview inside an accordion and the events weren't firing the first attempt. If you add a control to it during OnInit then it appears to work. My assumption is that there's a problem with the RenderControls or something.

Astynax777:
I also ran into the exact same problem. I was using a gridview inside an accordion and the events weren't firing the first attempt. If you add a control to it during OnInit then it appears to work. My assumption is that there's a problem with the RenderControls or something.

Astynaxx777 - This clicking twice problem has been a real issue for me. Can you please elaborate with a small example if possible? You mean to add a control to the AccordionPane when the page loads (through the code behind)?

Your help would be greatly appreciated.

I ran into the same problem where I couldn't get a Button click event to fire off until I did whatCConchelos tried:

"2. I have fixed my postback issues by adding a hidden field to each accordion pane at page_init. I don't know why this fixes the erradic behavior, but it does."

Here's a basic example:

 <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <div> </div> <cc1:Accordion ID="Accordion1" runat="server"> <Panes> <cc1:AccordionPane ID="AccordionPane1" runat="server"> <Header>Test1</Header> <Content> <asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton> </Content> </cc1:AccordionPane> <cc1:AccordionPane ID="AccordionPane2" runat="server"> <Header>Test2</Header> <Content> <asp:Button ID="Button1" runat="server" Text="Button" /> </Content> </cc1:AccordionPane> </Panes> </cc1:Accordion> </form></body>

The Button1 click event would not get called until I added a hidden field to the AccordionPane that contained Button1 on the Page_Init:

Private Sub Page_Init(ByVal senderAs System.Object,ByVal eAs System.EventArgs)Handles MyBase.InitDim myAccordionPaneAs AccordionPaneDim myTextBoxAs New TextBox myTextBox.Visible =False myAccordionPane =MyBase.FindControl("AccordionPane2") myAccordionPane.Controls.Add(myTextBox)End Sub

I thinkAstynax777 is right - there must be something wrong with the controls inside an AccordionPane when being rendered.

Thank you very much. It should be noted that after Astynax777's suggestion I tried it with a button and I forgot to hide it, and it didn't work as expected.

Excellent example, thanks again.

Hi,

has anyone found out more about this issue? As indicated in a previous post, the issue appears to be that controls are not rendered properly the first time the accordion is loaded. When the postback occurs, the controls have a different id, and no event is fired since it cannot be hooked up to the appropriate control (since the ID has changed).

I have a slightly different problem than those posted above as the accordion I'm working with is loaded via a datasource. I cannot add controls on the init event as a temporary fix. Any idea for a workaround would be greatly appreciated until this is resolved.

Thanks

btw, this "click twice" error disappears when I have only 1 accordion control on a page. If there are two accordion controls (one is data bound, the other is not), then I have to click twice. When I only have the databound accordion, it works as intended.

The good thing is that adding the "invisible" control to each pane in the Accordion which is not databound has fixed the "click twice" error in the databound Accordion.

Ok, I think I have this problem fixed. You can see the changes I made athttp://www.codeplex.com/AtlasControlToolkit/WorkItem/View.aspx?WorkItemId=5796 . There's 2 files I uploaded for that issue. I might help you... or it might not, I have not tested it for your problem but it certainly fixed mine! Good luck.

Has anybody else tried it with the new 10660 release? For me, the event handling never worked. My accordion is completely databound and does not contain any unbound panes. Consequently, the workaround will not work for me. I've just tried it with 10660, but no change.

Dennis Doomen
Aviva Solutions

I was having all of those 'click twice' problems but in randomly places. I used Accordions on many different pages and I couldnt figure out why it worked on some pages and didnt on others. I realized that on the page that it didnt work I was doing my control loading during OnInit and on my other pages that did work it was during PageLoad. Im guessing you have to make sure that everything must be done in one or the other. If you have User Controls make sure that your logic and things are also in it's page load as well. Dont mix and match :)

TreeView "MyTreeView_Data" is undefined

Hi,

I have a page with a TreeView control inside a webpart.

This page uses Atlas (July CTP), but not exactly in this webpart. That's why I am not sure if it's an Atlas problem or a standard ASP.NET problem.

When I click a node of the TreeView (to select it), sometimes I have this javascript error:

"A Runtime Error has occurred."
"Error: 'wpMgr_myTreeView_Data' is undefined"

The problem is aleatory. Doesn't happen always, only sometimes.

Any idea on what could be the cause?

Maybe Atlas July CTP exists some?issues?to?work?TreeView?node?in?WebPart.I?suggest?you?to?download?the?latest?Ajax?
Beta?2?and?Futures?November?CTP?to?try?if?it?works?fine.
Here are some sample codes about a TreeView in WebPartZone for your reference.
<WebPart:webpartmanager id="WebPartManager1" runat="server"></WebPart:webpartmanager>
<WebPart:webpartzone id="WebPartZone1" runat="server" bordercolor="#CCCCCC" font-names="Verdana"
padding="6" width="169px">
<PartChromeStyle BackColor="#F7F6F3" ForeColor="White" BorderColor="#E2DED6" Font-Names="Verdana"></PartChromeStyle>
<MenuLabelHoverStyle ForeColor="#E2DED6"></MenuLabelHoverStyle>
<EmptyZoneTextStyle Font-Size="0.8em"></EmptyZoneTextStyle>
<MenuLabelStyle ForeColor="White"></MenuLabelStyle>
<MenuVerbHoverStyle BackColor="#F7F6F3" BorderStyle="Solid" ForeColor="#333333" BorderWidth="1px" BorderColor="#CCCCCC"></MenuVerbHoverStyle>
<HeaderStyle ForeColor="#CCCCCC" HorizontalAlign="Center" Font-Size="0.7em"></HeaderStyle>
<MenuVerbStyle BorderStyle="Solid" ForeColor="White" BorderWidth="1px" BorderColor="#5D7B9D"></MenuVerbStyle>
<PartStyle ForeColor="#333333" Font-Size="0.8em"></PartStyle>
<TitleBarVerbStyle ForeColor="White" Font-Size="0.6em" Font-Underline="False"></TitleBarVerbStyle>
<MenuPopupStyle BackColor="#5D7B9D" BorderWidth="1px" BorderColor="#CCCCCC" Font-Size="0.6em" Font-Names="Verdana"></MenuPopupStyle>
<PartTitleStyle BackColor="#5D7B9D" ForeColor="White" Font-Size="0.8em" Font-Bold="True"></PartTitleStyle>
<ZoneTemplate>
<asp:TextBox ID="tbWebPart" runat="server" Height="19px" Width="197px"></asp:TextBox>
<asp:UpdatePanel ID="upTree" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<asp:DetailsView ID="DetailsView1" runat="server" Height="50px" Width="125px" AutoGenerateRows="False" DataSourceID="SqlDataSource1" AllowPaging="True" CellPadding="4" ForeColor="Black" GridLines="Vertical" BackColor="White" BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px">
<Fields>
<asp:TemplateField>
<ItemTemplate>
<asp:TreeView ID="TreeView1" runat="server">
<Nodes>
<asp:TreeNode Text="File" Value="File">
<asp:TreeNode Text="New" Value="New"></asp:TreeNode>
<asp:TreeNode Text="Open" Value="Open"></asp:TreeNode>
<asp:TreeNode Text="Exit" Value="Exit"></asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="Edit" Value="Edit"></asp:TreeNode>
<asp:TreeNode Text="WebSite" Value="WebSite"></asp:TreeNode>
<asp:TreeNode Text="Build" Value="Build"></asp:TreeNode>
<asp:TreeNode Text="Debug" Value="Debug"></asp:TreeNode>
<asp:TreeNode Text="Format" Value="Format"></asp:TreeNode>
<asp:TreeNode Text="Help" Value="Help"></asp:TreeNode>
</Nodes>
</asp:TreeView>
</ItemTemplate>
<EditItemTemplate>
<asp:TreeView ID="TreeView2" runat="server" ShowCheckBoxes="All">
<Nodes>
<asp:TreeNode Text="File" Value="File">
<asp:TreeNode Text="New" Value="New"></asp:TreeNode>
<asp:TreeNode Text="Open" Value="Open"></asp:TreeNode>
<asp:TreeNode Text="Exit" Value="Exit"></asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="Edit" Value="Edit"></asp:TreeNode>
<asp:TreeNode Text="WebSite" Value="WebSite"></asp:TreeNode>
<asp:TreeNode Text="Build" Value="Build"></asp:TreeNode>
<asp:TreeNode Text="Debug" Value="Debug"></asp:TreeNode>
<asp:TreeNode Text="Format" Value="Format"></asp:TreeNode>
<asp:TreeNode Text="Help" Value="Help"></asp:TreeNode>
</Nodes>
</asp:TreeView>
</EditItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="ProductID" HeaderText="ProductID" InsertVisible="False"
ReadOnly="True" SortExpression="ProductID" />
<asp:BoundField DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName" />
<asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" SortExpression="UnitPrice" />
<asp:CommandField ShowEditButton="True" />
</Fields>
<FooterStyle BackColor="#CCCC99" />
<EditRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#F7F7DE" />
<PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
<HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
</asp:DetailsView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ProductConnectionString %>"
SelectCommand="SELECT [ProductID], [ProductName], [UnitPrice] FROM [Product]" DeleteCommand="DELETE FROM [Product] WHERE [ProductID] = @.ProductID" InsertCommand="INSERT INTO [Product] ([ProductName], [UnitPrice]) VALUES (@.ProductName, @.UnitPrice)" UpdateCommand="UPDATE [Product] SET [ProductName] = @.ProductName, [UnitPrice] = @.UnitPrice WHERE [ProductID] = @.ProductID">
<DeleteParameters>
<asp:Parameter Name="ProductID" Type="Int32" />
</DeleteParameters>
<UpdateParameters>
<asp:Parameter Name="ProductName" Type="String" />
<asp:Parameter Name="UnitPrice" Type="Double" />
<asp:Parameter Name="ProductID" Type="Int32" />
</UpdateParameters>
<InsertParameters>
<asp:Parameter Name="ProductName" Type="String" />
<asp:Parameter Name="UnitPrice" Type="Double" />
</InsertParameters>
</asp:SqlDataSource>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="DetailsView1" />
</Triggers>
</asp:UpdatePanel>
</ZoneTemplate>
</WebPart:webpartzone>
Wish this can give you some helps.

Treeview & UpdatePanel - Assertion failed - cant find last / in base url

Hi,

I am using a TreeView and couple of server controls. The treeview children are dynamically added on click of a node. I have the treeview control inside an update panel. Everything works if I access the page in a normal IE window. When I try to access the same page through a modal dialog, during postback, it opens a new window. To avoid that, I've added<base target = "_self" />.

Now I'm getting another error with Atlas. On click of tree node, it says "Assertion Failed : Can't find last / in base url. If I remove the <base..> it doesn't work.

Looking for an immediate solution. I've spent almost a day in googling. But no luck yet.

Many Thanks,
Mani.

hello.

you can also try using an iframe inside your popup page (ie, put only an iframe inside your popoup window which loads the page that shows the content)...maybe it'll solve that problem.

Mani,

Add:<basetarget="_self"href="http://localhost/***/***/"runat="server"/>

because our dear js function check if u have base tag , then try to concat with href value. in your case you don't have it.

what if i'm using a Master Page - i can't hard code a path in the href. Is there any way to accomplish this? Plus - even if i hard code, the paging on my grid view does not work now.

trans642:
Mani,
Add:<basetarget="_self"href="http://localhost/***/***/"runat="server"/>
because our dear js function check if u have base tag , then try to concat with href value. in your case you don't have it.
T.

GOOD THANKS !

trans642:
Mani,
Add:<basetarget="_self"href="http://localhost/***/***/"runat="server"/>
because our dear js function check if u have base tag , then try to concat with href value. in your case you don't have it.
T.

GOOD THANKS !

Try this, without hard code url Smile

 <base target="_self" href="<%=Request.Url.OriginalString%>" />

works perfect ... Thanks.

Treeview + Update Panel

Hi!

I'm working on atlas and I'm testing some functionnality. I created a page with a treeview contained in an update panel and another update panel that shoul be updated when one selects a node but it doesn't work. Can someone help me?
Here is th source code:

<%@dotnet.itags.org. Page Language="C#" %>"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> void dataBound(Object sender, TreeNodeEventArgs e) {// Determine the depth of a node as it is bound to data. // If the depth is 1, show a check box. if (e.Node.Depth == 2) { e.Node.ShowCheckBox = true; } else { e.Node.ShowCheckBox = false; } } protected void TreeView1_SelectedNodeChanged(object sender, EventArgs e) {//If a node is selected, display the text in the right table Message.Text = TreeView1.SelectedNode.Text; }</script><html xmlns="http://www.w3.org/1999/xhtml" >First TreeView with an XML File"server"> "text/css"> div.global { width:100%; margin:0px; border:1px solid #99ccff; line-height:150%; } div.header,div.footer { padding:0.5em; color:white; background-color:#99ccff; clear:left; } div.left {float:left; width:200px; margin:0; padding:1em; } div.right { margin-left:270px; border-left:1px solid #99ccff; padding:1em; } "form1" runat="server"> true ID=ScriptManager runat=server/>class=global>
class="header">Dynamic Atlas Tree View
class=left> "TreeView1" runat="server" DataSourceID="XDS" OnTreeNodeDataBound="dataBound" ShowCheckBoxes=None OnSelectedNodeChanged="TreeView1_SelectedNodeChanged" ShowLines=true> "Kpf" ValueField="ID" TextField="Name"/> "Activity" ValueField="Value" TextField="Value"/> "XDS" runat="server" DataFile="~/XMLTVDataSource.xml">
class=right> Selected elements

 "TreeView1" EventName="SelectedNodeChanged "/>
class=footer>KPF Nord

There is a bug with the TreeView. If you remove ShowLines (or set it to false) it should work. When ShowLines is set to true, the controlsometimes generates invalid xhtml.

For more details, check out this post:
http://forums.asp.net/forums/1196633/ShowPost.aspx

Thanks for your reply. This is the error generated when I debug:
"The EventName must be set to a valid event name on the associated control"
And it occurs because of the triggers tag.
Could someone help me to fix this problem?

TreeView + SelectedNodeChanged + UpdatePanel = Problems

I wondered if anyone else has had strange behavior when specifying the SelectedNodeChanged event of a TreeView as an AsyncPostBackTrigger for an UpdatePanel. I'm currently seeing erratic behavior. Some nodes will post back when selected, and others won't; it seems totally random.

There was no problem before I upgraded fromRelease 60914 of the toolkit.

While we work closely with the ASP.NET AJAX team when developing the Toolkit, they're the real experts on general ASP.NET AJAX issues. Your problem doesn't seem to be directly related to the Toolkit, so we'd appreciate if you considered posting to one of theother newsgroups such asAJAX Discussion and Suggestions. Your post will be more helpful to others looking for similar advice if it's in the right place. Thank you!

I have Treeview inside asp:UpdatePanel.{ASP.NET Ajax RC version}

Its not maintaining its viewstate properly while expanding/collepsing nodes.

If I remove Updatepanel,, it works fine.

Is it a bug ?? what could be relevent and reliable solution.

Thanks in advance.

Rahul Jain

This is still the wrong forum for this question, but I'll answer anyway: TreeView is not supported inside an UpdatePanel. Seehttp://ajax.asp.net/docs/overview/UpdatePanelOverview.aspx.

If you have a TreeView inside an UpdatePanel, it is better to have the following properties set as such PopulateNodesFromClient="false" and EnableClientScript="false". Hope this will solve at least some random problems when clicking/expanding/collapsing a treenode.

Cheers,

vince.n3t

Hello,

I tried a few things in my code & everything started working fine. But I get an error on the IE7 page (error: Invalid argument, Line: 43, Character:238).

On putting a break point & then debugging, I get a break on the JS page & the error points to --> accordion.insertBefore(wrapper, content)

I have no idea what this error means & how to debug it. Because everything on the IE7 page works as I want it to, but I get this error on the status bar as: 'Done, but with errors on page'.

Please help me with this error, as this a project I am working on & I need to complete it before the deadline. Any other options for creating a TreeView using any of the Ajax Extenders with the Update Panel are also welcome.

MyDefault.aspx :

<%@. Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AJAXRajeev.Default" %>

<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>
Sales Professional Desktop II
</title>
</head>
<body>
<form id="form1" method="post" runat="server">
<div class="Default" style="float:left">

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" EnablePartialRendering="true">
<Services>
<asp:ServiceReference Path="WebService.asmx" />
</Services>
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<div id="MyAccordion" runat="server">
<ajaxToolkit:Accordion ID="Accordion1" runat="server" SelectedIndex="0">
<Panes>
<ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
<Header><a href="http://links.10026.com/?link=" onclick="return false;" class="accordionlink" />
External Documents
</Header>
<Content>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel ID="navPanel" runat="server" ScrollBars="auto">
<asp:TreeView ID="TreeView1" runat="server" BackColor="Transparent" ExpandDepth="1" MaxDataBindDepth="2" NodeIndent="10" SkipLinkText="skip nav" Target="~/Default.aspx" ToolTip="navigation" Font-Names="Verdana" Font-Size="Smaller" ForeColor="Gray" ShowLines="True" PopulateNodesFromClient="true" EnableClientScript="True">
<ParentNodeStyle Font-Bold="False" ImageUrl="~/Images/folder.gif" />
<HoverNodeStyle Font-Underline="True" />
<SelectedNodeStyle Font-Underline="True" HorizontalPadding="0px" VerticalPadding="0px" ImageUrl="~/Images/folder_open.gif" />
<RootNodeStyle ImageUrl="~/Images/folder.gif" />
<NodeStyle Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" HorizontalPadding="5px" NodeSpacing="0px" VerticalPadding="0px" ImageUrl="~/Images/folder_open.gif" />
</asp:TreeView>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
External Documents
</ProgressTemplate>
</asp:UpdateProgress>
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress2" runat="server">
<ProgressTemplate>
External Documents
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</form>
</body>
</html>

MyDefault.aspx.cs :

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 AllianceBernstein.Wsg.Retail.Common.Data;
using System.Data.SqlClient;
using System.IO;
using System.Drawing;
using System.Web.Services;
using AjaxControlToolkit;

namespace AJAXRajeev
{
[Serializable]
public partial class Default : System.Web.UI.Page
{
protected System.Web.UI.WebControls.Label lblSelectedPath;
protected const string ROOT_PATH = "2:";

protected TreeView Tree
{
get
{
return Accordion1.FindControl("TreeView1") as TreeView;
}
}

protected UpdatePanel UpdatePanel
{
get
{
return Accordion1.FindControl("UpdatePanel1") as UpdatePanel;
}
}

protected void Page_Load(object sender, System.EventArgs e)
{
//UpdateProgress1.AssociatedUpdatePanelID = this.UpdatePanel.ClientID;

Ajax.Utility.RegisterTypeForAjax(typeof(AJAXPortal));
if (!Page.IsPostBack)
{
LoadTree();
}

Folder[] aFolders = Folder.List();

this.Tree.ExpandAll();
}

[Ajax.AjaxMethod()]
private void LoadTree()
{
if (this.Tree == null)
{
return;
}

Folder[] aFolders = Folder.List();
foreach (Folder oFolder in aFolders)
{
TreeNode oTreeNode = new TreeNode();
oTreeNode.Text = oFolder.Name;
oTreeNode.ImageUrl = "/images/folder.gif";
this.Tree.Nodes.Add(oTreeNode);

}
}

internal DataSet ListFolder()
{
throw new Exception("The method or operation is not implemented.");
}

}
}

Please help me with this.

Karamchand

TreeView + UpdatePanel Problems

Hi there!

I think Imight have come across a bug with theasp:TreeView control when combined with theatlas:UpdatePanel.
If you take the following code, everything works fine:

<%@dotnet.itags.org.PageLanguage="VB"%>
<!DOCTYPEhtml PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<scriptrunat="server">
Protected Sub tv_SelectedNodeChanged(ByVal senderAs Object,ByVal eAs System.EventArgs)
tb.Text = tv.SelectedNode.Text
End Sub
</script>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>Tree View Problem</title>
</head>
<body>
<formid="form1"runat="server">
<p>Click on a node of the Treeview below and its text should be put into the text box</p>
<atlas:ScriptManagerrunat="server"ID="scriptManager"EnablePartialRendering="true" />
<asp:TreeViewID="tv"runat="server"OnSelectedNodeChanged="tv_SelectedNodeChanged"ImageSet="XPFileExplorer">
<Nodes>
<asp:TreeNodeText="Books"Value="Books">
<asp:TreeNodeText="Practical C-Sharp"Value="1"></asp:TreeNode>
<asp:TreeNodeText="Mastering VB.Net"Value="2"></asp:TreeNode>
</asp:TreeNode>
<asp:TreeNodeText="Movies"Value="3">
<asp:TreeNodeText="Kill Bill vol. 1"Value="4"></asp:TreeNode>
<asp:TreeNodeText="Dodgeball"Value="5"></asp:TreeNode>
<asp:TreeNodeText="Anchorman"Value="6"></asp:TreeNode>
</asp:TreeNode>
</Nodes>
</asp:TreeView>
<atlas:UpdatePanelID="up"runat="server">
<ContentTemplate>
<asp:TextBoxID="tb"runat="server"></asp:TextBox>
</ContentTemplate>
<Triggers>
<atlas:ControlEventTriggerControlID="tv"EventName="SelectedNodeChanged" />
</Triggers>
</atlas:UpdatePanel>
</form>
</body>
</html>

However, things stop working when you either:

CustomSimpleSimple2Bulleted ListBulleted List 2Bulleted List 3Bulleted List 4NewsInboxEventsFaq

I think that the reason for this is because the javascript emitted by the TreeView control is not enclosed in aCDATA section, and that the image array created by the control contains-- e.g.

WebResource.axd?d=9G92-mY7CscAg6O7lwv8PsnId--TqhIqRaQpDEdAXI1&t=632745594511093750

Is there something I'm doing wrong, or is this a bug??
Can anyone find any workarounds?

Thanks,

James

James,

I copied the code into a webform and it works fine. I'm using the January atlas release, and I set the ImageSet to simple, ShowLines=True.

Ditto.

?
-Jarred

Thanks for looking into this! I too am using the January Atlas release and the production release of VS 2005. It seems that there's something else that combines with what I've done to produce my problem...

I am now sure that the problem is caused by WebResource.axd. Unfortunately, in the cut down version I have posted here, it doesn't seem to cause problems, yet in my project with other stuff it does!! Big Smile [:D]

I've been running this through the debugger, and things fail for me in line 7908 of Atlas.js in the this._onFormSubmitCompleted function. The problem is that the XML being returned is not valid XML. In certain instances (which Iyet Embarrassed [:$] cannot reproduce in a postable WebForm), the TreeView control emits the following javascript:

<script type=\"text/javascript\">

</script>

Now the problem with this is that (in this instance) the 2nd resource contains three hyphens "--"... and this is not valid XML, as XMLDom expects this to be -->!! Smile [:)]

The javascript rendered by the TreeView control seems to go completely against the guidelines that MS sets out inhttp://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnaspp/html/ASPNETusStan.asp, where in point 9 under "Creating XHTML Pages" we are told that "The contents of<script> and<style> elements must be wrapped in CDATA sections." Wink [;)]

So at this point in Atlas.js, response.get_data() returns the following:

<delta><rendering><head><title>
Tree View Problem
</title><style type="text/css">
.atlas__delta { font-family:Lucida Console; }
.tv_0 { text-decoration:none; }
</style></head><form name="form1" method="post" action="Default5.aspx" id="form1">
<div>
<input type="hidden" name="tv_ExpandState" id="tv_ExpandState" value="ennennn" />
<input type="hidden" name="tv_SelectedNode" id="tv_SelectedNode" value="tvt6" />
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="tv_PopulateLog" id="tv_PopulateLog" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTQ3MDQwNDUzNA9kFgICBA9kFgICAw88KwAJAgAPFgYeDU5ldmVyRXhwYW5kZWRkHgxTZWxlY3RlZE5vZGUFBHR2dDYeCUxhc3RJbmRleAIHZAgUKwADZBQrAAIWAh4IRXhwYW5kZWRnFCsAA2QUKwACFgIfA2dkFCsAAhYCHwNnZBQrAAIWAh8DZxQrAARkFCsAAhYCHwNnZBQrAAIWAh8DZ2QUKwACFgQfA2ceCFNlbGVjdGVkZ2RkGAEFHl9fQ29udHJvbHNSZXF1aXJlUG9zdEJhY2tLZXlfXxYBBQJ0dsRdhXgThnE10BW40FEMjizxq93a" />
</div>
<script type="text/javascript">

</script>

<script src="http://pics.10026.com/?src=/AtlasWebSite1/WebResource.axd?d=Yq1-cqrnodOdYLOHDjipoA2&t=632745594511093750" type="text/javascript"></script>

<script src="http://pics.10026.com/?src=/AtlasWebSite1/WebResource.axd?d=8Qz3IJF2us-avEkYWU7p3g2&t=632745594511093750" type="text/javascript"></script>
<script>

</script>
<panelContent id="up"><![CDATA[
<input name="tb" type="text" value="Anchorman" id="tb" />
]]></panelContent>
<script type="text/javascript">

</script>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWCQKH85qQDwLM76LvDALF75m7CAKHpcXIAgKHpdGjCQKBgIwCApf6maAIApf65ZsHApf68fYP70RolxkG7u2i0qsPezZ/X1yrQs8=" />
</div>
<script type="text/javascript">

</script>
</form></rendering><deltaPanels>up</deltaPanels><xmlScript><page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
<components />
</page></xmlScript></delta>

But response.get_xml() returns nothing, because it is not valid XML!!

I'm going to try and get a concise reproducable example, but in the meantime, if anyone could comment on the above it would be greatly appreciated!!

Cheers,

James

OK... I've spent a bit more time on this and found out the following information:

The problem is not reproducible with a fixed example.

For anyone that's actually interested...

I raised this as a bug with Microsoft... you can see the gory details athttp://lab.msdn.microsoft.com/productfeedback/viewfeedback.aspx?feedbackid=96bfa645-1b02-4b10-92bd-8aafe70e6d54

But in essence they have said:

Resolved as Duplicate by Microsoft on 2006-02-21 at 10:46:28
Thanks for your feedback regarding the Treeview not emitting javascript in CDATA sections
We plan to fix this problem, but no definite time can be given

Hi,

Is there a work around for this problem, its a show stopper for using Atlas in my project with this bug.

Thanks for any help.

Hi Paul!

Unfortunately, there is no workaround to the control not emitting the CDATA section. MS have known about this for some time (i.e. last summer), but have done nothing with it. Hopefully it will get sorted in SP1 of the framework!

However, if your problems are only being caused by the -- string in the WebResource.axd parameter then you can fix it. Basically, what you'll have to do is create a new project and then copy and paste your existing code into it.

I know this is a huge pain in the backside, but it's the only way around it!!! You might also find that when you come to deploy, it doesn't work... so you then have to uninstall the deployment and redeploy until it does work!!!

Cheers,

James

Hi James,

I am able to work with TreeView Control perfectly without any issues, but it stop working in Firefox after the hit to the child node which calls the partial update to the adjacent panel.

I dont see any javascript error in the Javascript console.
also everything is working absolutely fine in both browsers when i eliminate the Atlas coding.

HEre is the outlined part of the aspx file.
--------

<%@.PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="Default"EnableEventValidation="false"%>

html>

headid="Head1"runat="server"><title>Duty Station Directory</title><linkhref="site.css"rel="stylesheet"type="text/css"/><linkrel="stylesheet"type="text/css"href="siteprint.css"media="print"/>

head>

SCRIPTlanguage="javascript">

function

scrollTop()

{

document.getElementById(

'RightPanel').scrollTop=0;

}

function

fnTrapKD(btn,event){if (document.all){if (event.keyCode == 13){event.returnValue=false;event.cancel =true;

btn.click();

}

elseif (document.getElementById){if (event.which == 13){event.returnValue=false;event.cancel =true;

btn.click();

}

elseif(document.layers){if(event.which == 13)

{

event.returnValue=false;event.cancel =true;

btn.click();

}

SCRIPT>

body><atlas:ScriptManagerrunat="server"ID="ScpMgr"EnablePartialRendering="true"/><formid="thisFrm"runat="server"><tableclass="PageWidth"><tr><tdclass="Header">Duty Station Directory</td><tdclass="SearchRow"style="width: 45%">

<asp:TextBoxID="txtSearch"runat="server"/><asp:ButtonCssClass="MenuButton"id="btnSearch"Text="Go"runat=serverOnClick="btnSearch_Click"/><atlas:UpdatePanelID="ErrorUpdtPanel"runat="server"Mode="Conditional"RenderMode="Inline"><ContentTemplate><asp:LabelID="lblErr"CssClass="errMessage"Text="Please enter text to search..."runat="server"Visible="false"/></ContentTemplate><Triggers><atlas:ControlEventTriggerControlID="btnSearch"EventName="Click"/></Triggers></atlas:UpdatePanel></td></tr></table><asp:XmlDataSourceID="HCRXML"runat="server"DataFile="~/App_Data/HCRDIR_.XML"TransformFile="~/App_Data/XXXXXXX.xsl"/><tableclass="PageWidth Layout PageTable"><tr><tdclass="TreeLayout"><atlas:UpdatePanelID="UpdatePanel1"runat="server"RenderMode="Inline"Mode="Conditional"><ContentTemplate><divid="TreePanel"runat="server"Class="PageTable PanelTree"><atlas:UpdatePanelID="TreeUpdtPanel"runat="server"RenderMode="Inline"Mode="Conditional"><ContentTemplate><asp:TreeViewID="TreeHCR"runat="server"DataSourceID="HCRXML"OnSelectedNodeChanged="TreeHCR_SelectedNodeChanged"ShowLines="True"ExpandDepth="1"ShowExpandCollapse="true"><DataBindings><asp:TreeNodeBindingDataMember="DutyStationDirectory"PopulateOnDemand="True"SelectAction="SelectExpand"Text="XXXXXXXXXXXXXXXXXX"Value="root"/><asp:TreeNodeBindingDataMember="Country"PopulateOnDemand="True"SelectAction="Expand"TextField="title"ValueField="id"/><asp:TreeNodeBindingDataMember="dsCity"TextField="title"ValueField="id"/></DataBindings><RootNodeStyleCssClass="nodeType rootNode"ImageUrl="~/Images/root.gif"/><ParentNodeStyleCssClass="nodeType parentNode"ImageUrl="~/Images/folder.gif"/><LeafNodeStyleCssClass="nodeType leafNode"ImageUrl="~/Images/page.gif"/><SelectedNodeStyleCssClass="nodeType selectedNode"/></asp:TreeView></ContentTemplate></atlas:UpdatePanel></div></ContentTemplate><Triggers><atlas:ControlEventTriggerControlID="RepeaterSearchResults"EventName="ItemCommand"/></Triggers></atlas:UpdatePanel></td><tdclass="DetailLayout"><atlas:UpdateProgressID="UpdateProgressLabel"runat="server"><ProgressTemplate><imgsrc="Images/indicator.gif"/></ProgressTemplate></atlas:UpdateProgress><asp:Panelid="RightPanel"CssClass="PageTable PanelDetail"runat="Server"><atlas:UpdatePanelID="DetailUpdtPanel"runat="server"Mode="Conditional"RenderMode="Inline"><ContentTemplate><asp:PanelID="DetailPanel"runat="server"><divclass="InfoDetailTable"runat="server"id="divDtls"/></asp:Panel></ContentTemplate><Triggers><atlas:ControlEventTriggerControlID="RepeaterSearchResults"EventName="ItemCommand"/><atlas:ControlEventTriggerControlID="TreeHCR"EventName="SelectedNodeChanged"/><atlas:ControlEventTriggerControlID="btnSearch"EventName="Click"/></Triggers></atlas:UpdatePanel><atlas:UpdatePanelID="SearchResultsUpdtPanel"runat="server"Mode="Conditional"><ContentTemplate><asp:PanelID="SearchPanel"runat="server"><asp:RepeaterID="RepeaterSearchResults"runat="server"OnItemCommand="RepeaterSearchResults_ItemCommand"><HeaderTemplate><H1class="Title">Total Matches found for '<i><%# Keyword %>'</i> : <%# TotalResults %></H1></HeaderTemplate><ItemTemplate><divclass="lightRow"><divclass="links"><asp:LinkButtonID="DetailLink"runat="server"CommandArgument='<%# DataBinder.Eval(Container.DataItem, "Country_Id") + "#" + DataBinder.Eval(Container.DataItem, "dsCode") %> '> <%#DataBinder.Eval(Container.DataItem,"OfficeType") %></asp:LinkButton></div><divclass="Resdetails"> <%#DataBinder.Eval(Container.DataItem,"dsCode") %> -

#DataBinder.Eval(Container.DataItem,"dsCity") %></div></div></ItemTemplate><AlternatingItemTemplate><divclass="darkRow"><divclass="links"><asp:LinkButtonID="DetailLink"runat="server"CommandArgument='<%# DataBinder.Eval(Container.DataItem, "Country_Id") + "#" + DataBinder.Eval(Container.DataItem, "dsCode") %> '> <%#DataBinder.Eval(Container.DataItem,"OfficeType") %></asp:LinkButton></div><divclass="Resdetails"> <%#DataBinder.Eval(Container.DataItem,"dsCode") %> -

#DataBinder.Eval(Container.DataItem,"dsCity") %></div></div></AlternatingItemTemplate></asp:Repeater><divid="Navigation"runat="server"><asp:LinkButtonID="PreviousPageNav"CssClass="leftnav"runat="server"CommandName="Previous"OnCommand="PageNav_Command"><< Previous | </asp:LinkButton><asp:LabelID="PagerLocation"CssClass="numnav"runat="server"/><asp:LinkButtonID="NextPageNav"CssClass="rightnav"runat="server"CommandName="Next"OnCommand="PageNav_Command"> | More>></asp:LinkButton></div></asp:Panel></ContentTemplate><Triggers><atlas:ControlEventTriggerControlID="RepeaterSearchResults"EventName="ItemCommand"/><atlas:ControlEventTriggerControlID="TreeHCR"EventName="SelectedNodeChanged"/><atlas:ControlEventTriggerControlID="btnSearch"EventName="Click"/><atlas:ControlEventTriggerControlID="PreviousPageNav"EventName="Command"/><atlas:ControlEventTriggerControlID="NextPageNav"EventName="Command"/></Triggers></atlas:UpdatePanel>

</asp:Panel></td></tr></table></form>

body>

html>
------------------

I hope someone would have faced the same error and can help me to rectify it.
James

Treeview acting strange in UpdatePanel

We are having issues with a treeview in an updatepanel with the RC release. When we click a child node, sometimes it closes other nodes at the same level. When a closed node is expanded again, it has a child node that is expanded. It looks like the treeview is mixing up an opened node with one of its child nodes. If we take it out of an update panel, it works fine, but does full postbacks at every click. Any ideas how to fix this problem?

treeview is not supported by Ajax.NET (I heard rumours about Q3 Orcas -related update)

do search in the forum

I have been searching, but didn't find much. It is just yet another ASP.NET control that isn't supported with UpdatePanels since the CTPs...

I would say treeview made troubles even in CTPs...

this control is discussed quite often here, even the post preceding yours mentions that...

http://forums.asp.net/thread/1514853.aspx

It worked fine for us before, and the menu also did. We were also able to use ReportViewers without having to do a full postback, which you have had to since the Betas.

I am really disappointed that Menu and TreeView controls are not supported in ASP.Net AJAX UpdatePanels. I have a production website that successfully uses Menu and TreeView controls in UpdatePanels using the July CTP of Atlas. Sounds like I will never be able to upgrade to the fully supported ASP.Net AJAX version. I know that the TreeView control can do an asynchronous callback for the TreeNodePopulate event, but I also need partial page postbacks for the SelectedNodeChanged event. In fact, I want PopulateNodesFromClient to be false anyway otherwise the atlas UpdateProgress control does not appear for TreeNodePopulate event asynchronous callbacks. And I extensively use Menu controls to create tabstrips in combination with a MultiView control. I hope Menu and Treeview support can still be added to the final version of ASP.Net AJAX.

Remco

TreeView Ajax

Hello, I want to use a TreeView with Ajax, i put a TreeView inside a UpdataPanel but no compatibilty, So how to do for using a TreeView in Ajax, thank's.

You can either buy a 3rd party control that uses ajax, hack around with the prerender event, write your own treeview control, or wait around for a future ajax release that may or may not support it.

what do u mean bye hack the prerender

I have heard of some people writing code in the prerender event to handle the maintenance of the tree since it is not supported in update panels (although during the CTPs, it appeared to work well...that is why I mentioned waiting as an option because I heard they may fix it with the next release). We do not do this because we never got it working 100% without errors, and we bought the telerik ASP.NET control suite, which includes a tree with ajax functionality.

Hello, Can I know when the next release of asp.net ajax will appear??

Hi kadben,

You can find the Asp.Net Ajax Future at this url: http://quickstarts.asp.net/Futures/ajax/default.aspx You can down it here: http://www.microsoft.com/downloads/details.aspx?FamilyID=4cb52ea3-9548-4064-8137-09b96af97617&DisplayLang=en

In additional, here is the document for "Changes between the ASP.NET AJAX ("Atlas") CTP and the RTM Releases".

http://ajax.asp.net/documentation/AspNet_AJAX_CTP_to_RTM_Whitepaper.aspx

Hope it helps.

TreeView Ajax

Hello, I want to use a TreeView in a web form, but i want to use ajax, and i can't use it inside a updatepanel, so how i can use a treeview by using ajax.

Hi kadben,

TreeView is not compatible with partial-page updates, and is therefore not supported inside anUpdatePanel control

The following ASP.NET controls are not compatible with partial-page updates, and are therefore not supported inside anUpdatePanel control:

TreeView andMenu controls.

Web Parts controls. For more information, seeASP.NET Web Parts Controls.

FileUpload controls when they are used to upload files as part of an asynchronous postback.

GridView andDetailsView controls when their EnableSortingAndPagingCallbacks property is set totrue. The default isfalse.

Login,PasswordRecovery,ChangePassword, andCreateUserWizard controls whose contents have not been converted to editable templates.

TheSubstitution control.

Validation controls, which includes theBaseCompareValidator,BaseValidator,CompareValidator,CustomValidator,RangeValidator,RegularExpressionValidator,RequiredFieldValidator, andValidationSummary control.

Treeview and beta1

Can I use a Treeview inside UpdatePanel in Beta1?

I need to add/remove nodes from the Treeview, it would be nice to have this handled by the UpdatePanel.

Treeview is not supported in Beta1. I had the same issue.. sorry to deliver the bad news :(

Treeview and HoverMenuExtender

Is there any way to use the HoverMenuExtender with the Treeview? I tried overriding RenderPostText of the treenode and stuffing the extender in, but there's no control collection to stuff it into.

Thanks!

Hi bjpierron,

Unfortunately, I think the answer is no. I was able to get a very, very hacky version to run, but I don't think you'd be able to use it for any real scenarios. I don't think thatTreeView, and specificallyTreeNode, are extensible enough for you to add this support on top. With some really creative CSS you might be able to get the effect you're looking for using theHoverNodeStyle, but that's bout all I can suggest.

If you were interested, here's how I kind of got it not quite working... I created my ownHoverMenuTreeNode class that inherited offTreeNode. I added aPopupControlID property and variable toHoverMenuTreeNode to store the ID of the control to hover. In itsRenderPreText method I then 1) got a reference to the current page viaHttpContext.Current.CurrentHandler as Page, 2) checked the page's controls recursively to make sure a HoverMenuExtender was included (this ensures the necessary script is downloaded to the client) or I throw an exception that you need aHoverMenuExtender on the page when usingHoverMenuTreeNode, 3) got a reference to thepopupControl usingPage.FindControl and thePopupControlID variable, 4) used theHtmlTextWriter to write the start of adiv tag including a random id (I just used a GUID), 5) created a script that when executed did the exact same things as the JavaScript inthis post after a 1000 ms timeout (using the randomly generated ID and thepopupControl.ClientID), and 6) registered the script as a startup script with the page. Then in theRenderPostText I wrote out the end tag of thediv. What we're essentially doing is wrapping theTreeNodein adiv and dynamically hooking up theHoverMenuBehavior to it. This whole thing looks a lot messier than just adding controls to the page, but I couldn't find a way to do that usingTreeNode (as it's not aControl). The reason that this will never work reliably in practice is that we can't run our code to wireup the behavior until the "Atlas" scripts and our HoverMenuBehavior.js have run. This is why I added the timeout on the script to prevent it from running for a second to see if I could get it working... but it's not a safe thing to do in practice. Here's the code:

// WARNING: THIS IS VERY BAD. IT IS PRESENTED FOR LEARNING PURPOSES ONLY.// PLEASE DO NOT USE THIS CODE IN ANY APPLICATION YOU WRITEusing System;using System.Collections.Generic;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.HtmlControls;using AtlasControlToolkit;namespace ToolkitDemo{/// <summary> /// The HoverMenuTreeNode provides HoverMenu support on top of a standard /// TreeNode. You must have a TreeNode extender on your page for this to work. /// </summary>public class HoverMenuTreeNode : TreeNode {/// <summary> /// ID of the control that will display when this node is hovered /// </summary>private string _popupControlID =null;/// <summary> /// ID of the control that will display when this node is hovered /// </summary> [IDReferenceProperty(typeof(Control))]public string PopupControlID {get {return _popupControlID; }set { _popupControlID =value; } }/// <summary> /// Wrap the TreeNode in a div and write a startup script to wireup /// a HoverMenuBehavior to that div to display our the PopupControl /// </summary> /// <param name="writer">Html Writer</param>protected override void RenderPreText(HtmlTextWriter writer) {// Get a reference to the current page Page page = HttpContext.Current.CurrentHandleras Page;if (page ==null)throw new NotSupportedException("HoverMenuTreeNode can only be used in System.Web.UI.Page");// Recursively check to ensure the page contains a hovermenucontrolbool foundExtender =false; Queue controls =new Queue(); controls.Enqueue(page);while (controls.Count > 0) { Control current = controls.Dequeue(); foundExtender = currentis HoverMenuExtender;if (foundExtender)break;foreach (Control ctrlin current.Controls) controls.Enqueue(ctrl); } controls.Clear();if (!foundExtender)throw new NotSupportedException("HoverMenuTreeNode requires a HoverMenuExtender present on the Page");// Get a reference to the PopupControl Control popupControl = page.FindControl(_popupControlID);if (popupControl ==null)throw new NotSupportedException("HoverMenuTreeNode could not find a control with id \"" + _popupControlID + "\"");// Write out the start of the div that wraps the TreeNodestring id = Guid.NewGuid().ToString(); writer.WriteBeginTag("div"); writer.WriteAttribute("id", id); writer.Write(">");// Create a script that dynamically associates a new HoverMenuBehavior // with the id of our new div and the ClientID of the popupControl and // register it as a startup scriptstring script =// Wrap everything in a function to keep things uncluttered"<script>(function() { " +// Wrap the wireup in a function to execute on a timeout"var f = function() {" +"var ctrl = new Sys.UI.Control($('" + id +"')); " +"var behavior = new AtlasControlToolkit.HoverMenuBehavior(); " +"behavior.set_PopupControlID('" + popupControl.ClientID +"'); " +"behavior.set_PopupPosition('Right'); " +"ctrl.get_behaviors().add(behavior); " +"behavior.initialize(); " +"}; " +// Wait 1 second before running the function"window.setTimeout(f, 1000); " +"})();</script>"; page.RegisterStartupScript(id, script);// Write out the TreeNodebase.RenderPreText(writer); }/// <summary> /// Write the end of the div that wraps the TreeNode /// </summary> /// <param name="writer">Html Writer</param>protected override void RenderPostText(HtmlTextWriter writer) {base.RenderPostText(writer); writer.WriteEndTag("div"); } }}

Thanks,
Ted

Could most of this plumbing work be handled in an Adapter (ala the CSSAdapters)? Then you could change the way the actual TreeNode is rendered and then implement HoverTreeView class as a derivative of the normal TreeView which could be targetted by the normal extender stuff.

Hi IDisposable,

Yep, a lot of the plumbing goes away if you inherit from a TreeView. I don't even think you'd need to use an adapter. You could dynamically add theHoverMenuExtender to itsControls collection, etc. I believe you'd still be stuck with the problem of wiring up theTargetControlID of theHoverMenuProperties because it needs to be a server control. Not to mention the larger issue of associating any of the content in yourHoverMenu with a givenTreeNodefor any real functionality, etc. Aside from hacking something very specific together, I doubt you'd be able to make a solid, general purpose solution.

Thanks,
Ted

Has anyone come up with a workable way to do this yet? I played around with adding a HoverMenuExtender to a TreeNode programmatically but quickly found out that the TreeNode does not have an ID that I could access. So, therefore, I didn't have anything to poke into the TargetID property of the HoverMenuExtender.

TreeView and UpdatePanel - Beta 2

I believe the documentation states the treeview is not supported in an UpdatePanel but has anyone manged to make it work? There have been a bunch of posts that seem to indicate some success. I have a treeview driving a formview in an UpdatePanel. To make things work I think I just have to stop the SelectedNode from causing a postback and then wire up some javascript to "call" the UpdatePanel around the formview. Or is support for a treeview in a UpdatePanelimminent?

Thanks in advance

I have tried asp:TreeView and asp:UpdatePanel in the latest Ajax and find we can get the selected node of a TreeView in a asp:UpdatePanel.You can use a TreeView to drive a FormView in a asp:UpdatePanel.
Here are some sample codes for your reference.
HTML code in .aspx

TreeView and UpdatePanel

I create a web form to display directory structure of the disks of the server. I put a treeview on the form and fill it with the drive and directory names. Everything was fine until I put a UpdatePanel (and ScriptManager ofcourse) on the form and move the TreeView into it. Now, I have a problem with the first node of the treeview (C:\). When I expand that node I see all the directories in the root of the C: drive. But when I expand any directory, all the nodes collapses. Than, other root nodes (D:, E: etc) works properly, but C: is not. What is the thing I miss? I use Visual Studio 2005 and AJAX January CTP. My code is as follows;

protectedvoid Page_Load(object sender,EventArgs e)

{

string[] drives;int i;TreeNode node, initialChildNode;DriveInfo driveInfo;if (!Page.IsPostBack)

{

tvFileSystem.Nodes.Clear();

drives =

Environment.GetLogicalDrives();for (i = 0; i < drives.Length; i++)

{

node =

newTreeNode();

driveInfo =

newDriveInfo(drives[i]);try

{

node.Text = driveInfo.VolumeLabel +

"(" + drives[i] +")";

}

catch

{

node.Text = driveInfo.DriveType +

"(" + drives[i] +")";

}

node.Value = drives[i];

initialChildNode =

newTreeNode();

initialChildNode.Text =

".";

initialChildNode.Value =

".";

node.ChildNodes.Add(initialChildNode);

tvFileSystem.Nodes.Add(node);

node.Collapse();

}

tvFileSystem.CollapseAll();

}

protectedvoid tvFileSystem_TreeNodeExpanded(object sender,TreeNodeEventArgs e)

{

TreeNode node = e.Node;TreeNode initialChildNode, newNode, tempNode;DirectoryInfo dirInfo;DirectoryInfo[] subDirInfo;string path ="";string[] subDirs;int i;string dirName, js;if (node.Value ==".")return;

tempNode = node;

while (tempNode !=null)

{

path = tempNode.Value +

"\\" + path;

tempNode = tempNode.Parent;

}

try

{

dirInfo =

newDirectoryInfo(path);

subDirInfo = dirInfo.GetDirectories();

}

catch (Exception e1)

{

js =

"<script>alert('" + e1.Message.Replace("\r","").Replace("\n","") +"');</script>";

Page.ClientScript.RegisterStartupScript(

typeof(string),"expandError", js);return;

}

node.ChildNodes.Clear();

for (i = 0; i < subDirInfo.Length; i++)

{

newNode =

newTreeNode();

dirName = subDirInfo[i].Name;

newNode.Text = dirName;

newNode.Value = dirName;

try

{

subDirs =

Directory.GetDirectories(subDirInfo[i].FullName);if (subDirs.Length > 0)

{

initialChildNode =

newTreeNode();

initialChildNode.Text =

".";

initialChildNode.Value =

".";

newNode.ChildNodes.Add(initialChildNode);

}

node.ChildNodes.Add(newNode);

}

catch { };

}

And the aspx file :

@dotnet.itags.org.PageLanguage="C#"AutoEventWireup="true"CodeFile="dirTree.aspx.cs"Inherits="dirTree" %>

DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

htmlxmlns="http://www.w3.org/1999/xhtml">

headrunat="server"><title>Untitled Page</title>

head>

body><formid="form1"runat="server"><div><asp:ScriptManagerID="ScriptManager1"runat="server"></asp:ScriptManager>

</div><asp:UpdatePanelID="UpdatePanel1"runat="server"><ContentTemplate> <asp:TreeViewID="tvFileSystem"runat="server"OnTreeNodeExpanded="tvFileSystem_TreeNodeExpanded"Style="position: static"><SelectedNodeStyleBackColor="NavajoWhite"/><NodeStyleForeColor="Black"/></asp:TreeView></ContentTemplate></asp:UpdatePanel></form>

body>

html>

From what I have read, Treeviews and Menus do not work inside UpdatePanels. I did, however, get the menu to work without posting back by keeping the menu out of the UpdatePanel, but calling the appropriate menu event from the updatepanel.

<asp:UpdatePanel runat="Server" id="upSomeUpdatePanel" UpdateMode="Conditional">
<contentTemplate>
</contentTemplate>
<Triggers>
<AutoSyncPostBackTrigger ControlID="TreeViewID" Event="treevieweventname" />
</triggers>
</asp:UpdatePanel>

Don't copy and paste my code above because I did it all by memory and some of the control parameters might have slightly different names, but I hope you get the drift. The "treevieweventname" would be the name of the event you want to do without posting back - like "TreeNodeExpanded".

Hope this helps.

I have a treeview that works fine inside of an update panel.

What I'm doing differently is I'm not using the Expanded event,I'm using the TreeNodePopulate event and setting each node thathas children's "PopulateOnDemand" property to true. MyTreeView is inside an update panel and it expands, collapses,dynamically populates, etc. just fine.

By the way, I created a thread in this forum with a working example of a TreeView in an update panel using the technique I mentioned. I used the FileSystem since it's easy and doesn't requrie a database, it isn't exactly like yours but it works. It should show up soon upon moderation. Let me know if that helps!

Thank you aaron,

Your example is very helpful for me. But, what if I want user to select a node. I need to hold the selected node value, for example in a HiddenField. I modified your example by removing "Selected.Action = TreeNodeSelectAction.None" lines. And I add SelectedNodeChanged Event which includes following code:

hdSelectedPath.Value = tvFiles.SelectedNode.Value;

Now, it works except some thing. If I selects a node, then expands another node and select another node, the selected nodes changes in a wrong way. I mean, any other node is selected which I did not select.

What is the point I miss?

Thanks.

Thank you aaron,

hdSelectedPath.Value = tvFiles.SelectedNode.Value;

What is the point I miss?

Thanks.

TreeView and UpdatePanel

I'm trying to use a TreeView inside an UpdatePanel and trigger the update on TreeNodeCollapsed and TreeNodeExpanded to be able to save the viewstate of the tree without the page reloading. Something goes wrong though because I get an error message; "Unknown error" when I try to expand or collapse a node.

Im using the latest version of Atlas and my web.config is exactly like the one in their samples. What am I doing wrong!? Is it not possible to have a TreeView inside an UpdatePanel?

Please help me!

Hi,

Something else is at work here, just to eliminate can you run another atlas sample ok?

HTH

Andy

Yes, but I haven't tried to use Atlas in this project. Any suggestions on some easy test to see if Atlas works in my project?

TreeView and UpdatePanel

Hi:

I am experimenting with TreeView in ASP.NET 2.0 and ATLAS.

I have placed a simple TreeView inside an UpdatePanel, and populated it from an XML file as follows:

   <asp:TreeView ID="tvSysMgtNavigation" ExpandDepth="0" runat="server"> <DataBindings> <asp:TreeNodeBinding DataMember="Item" TextField="Name" SelectAction="None" /> <asp:TreeNodeBinding DataMember="ItemLine" TextField="Name" /> </DataBindings> </asp:TreeView> <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/App_Include/Management.xml" />

So, when the TreeView Loads inside the UpdatePanel, only the root is show to be expanded. When I click on the "plus" near the root, I get this javascript exception:

Microsoft JScript runtime error: Object expected

and Visual Studio 2005 show the exception at:

TreeView_PopulateNode(ctl00_tvSysMgtNavigation_Data,0,ctl00_tvSysMgtNavigationn0,ctl00_tvSysMgtNavigationt0,ctl00_tvSysMgtNavigationt0i,' ','Management','Management','t','/*[position()=1]','t')

Is there any known confusion between the ClientCallBack done by the TreeView and ATLAS?

regards

Update:

The problem seems to exist only when ExpandDepth= "0", if I place a number greater then 0, like 1 or 2, etc ... it works fine without any problem.

So the TreeView_PopulateNode is missing an object when it strats expanding form the top root.

This problem is not encountered when the TreeView is outside the UpdatePanel.

Thanks,

Did you test with Mode=Always?

atlas:UpdatePanelID="UpdatePanel1"runat="server"Mode="Always">

Same problem, now I am getting an exception at the end of the method, last line:

The problem is with CallBack that TreeView does to populate ondemand. But the question, why only when the ExpandDepth is 0, I get such an exception!!!

Regards

Hi:

As you all know, TreeView has a property called ExpandNodesFromClient, that is when set TRUE together with PopulateOnDemand, then once a node is clicked, a client-callback is generated to expand the children of a specific node.

Believe or not, I got an idea while I was sleeping last night. The idea is that, since I have the TreeView in an UpdatePanel, so an asynchronous request will be sent, why do I have to enable PopulateNodesFromClient? There is no use in fact to do so, since in all cases, an asynchronous request will be generated.

So once I set the PopulateNodesFromClient to FALSE, it seems to work fine.

I guess there is no better solution for this case.

Hope you will benefit from this experience Smile [:)] .

Regards

Hi Haidar,

Do u have solution for a setting the scrolling bar to its initial position. Actually the scroll bar reset to zero all the time.

Here is my code : --

bodyonload="document.getElementById('TreePanel').scrollTop = document.getElementById('divscroll').value">
<atlas:ScriptManagerrunat="server"ID="ScpMgr"EnablePartialRendering="true"/>

<formid="thisFrm"runat="server">

..........

<inputtype="hidden"id="divscroll"runat="server"/>

<atlas:UpdatePanelID="TreeUpdtPanel"runat="server"RenderMode="Inline"Mode="Conditional">

<divid="TreePanel"onscroll="document.getElementById('divscroll').value = this.scrollTop;"runat="server"onclick="document.getElementById('divscroll').value = this.scrollTop;"Class="PageTable PanelTree"onprerender="document.getElementById('TreePanel').scrollTop = document.getElementById('divscroll').value">

<asp:TreeViewID="TreeHCR"runat="server"DataSourceID="HCRXML"OnSelectedNodeChanged="TreeHCR_SelectedNodeChanged"ShowLines="True"ExpandDepth="1"ShowExpandCollapse="true">

.....

</DataBindings>
......

</asp:TreeView>

</div>

</ContentTemplate>

<atlas:ControlEventTriggerControlID="RepeaterSearchResults"EventName="ItemCommand"/>

</Triggers>

</atlas:UpdatePanel>

.............

</form>
</body>
</html>

I m trying to implement to set the pos to the values saved in the hidden box ...but its not working in Atlas.
Any idea how to put the values when the tree refreshed ...

Hello:

I guess couldn't understand you well, can you illustrate more on the problem please?

Thanks,

Hi,

just to avoid a thread duplication, I've answered the same questionhere.

Hello,

Just thought I should share this..

I also had a problem with TreeView control and it took me a while to find this thread..

I have a TreeView with several TreeNodes and each one has several ChildNodes with PopulateNodesFromClient set to True.

The error I was getting is the same "Objected Expected" JavaScript error and I ran out of luck until I found this thread and tried setting ExpandDepth to 0 or 1... Now the TreeView works just fine. FYI, without setting ExpandDepth, the property is set to -1.

Thanks.
-Moe

TreeView and update panel

I am creating a browser for a large document management system, modelled on the way windows explorer works.

So: ... I have a TreeView providing a view of the folders for which I am populating the child nodes on demand when a node is expanded or clicked. (The original method of populating the whole TreeView was impractical since it took several minutes to return and often timeout!)

At the same time, if a node is clicked, I show a list of the documents in that folder.

I can get this working, but somewhere along the way, the client stops working and the TreeView click event stops firing.

Is this a known issue or do you think I am asking too much of the framework?

I have since abandonded Atlas for this and am currently living with a long blank screen between page refreshes, which I think is totally useless for user experience.

Sorry not an immediate answer, but I would also be interested in anybody else's take on this.

I will trying to build more or less the same thing over the next couple of days (for an online content management system) so I'll get back to you then on it (successful or not!), but no I don't think it's asking too much, it's a perfectly logical use of it!

Coming back to this post.. .

How have you implemented the TreeView - just that it is supposed to implement client call back as part of the control so you shouldn't need to have blank screens and whole page refreshes - possibly a pause before expanding if it's big - but no blank screens?

I've just dropped it into my content management system, and while it's not pure Atlas, it seems to work fine using the client call back? Probably I'm missing something as only just started playing with Atlas.

TreeView checkboxes AutoPostBack with AJAX

Hello,

There is a known problem with TreeView checkboxes in ASP.NET: they can't do AutoPostBack. So I've solved this problem like this:

<script language="javascript" type="text/javascript">function postbackOnCheck(){ var o = window.event.srcElement; if (o.tagName == 'INPUT' && o.type == 'checkbox' && o.name != null && o.name.indexOf('CheckBox') > -1) { __doPostBack("",""); }}</script><asp:TreeView onclick="postbackOnCheck()" ID="treeContent" runat="server"> ... And so on ... </TreeView>

This way I get full postback each time the user checks\unchecks the checkbox.

But now I want to modify this code in order to make use of AJAX: I don't want the FULL postback, but I only want the tree itself to be updated. Of course, I've started by placing it inside the UpdatePanel. But what now? Can somebody help me with this issue?

Thanks Dmitry!

Clean solution. Very useful!

Nikolay

I haven't tried this out myself but would suggest creating an event trigger for your updatepanel for the treeview's onclick event. Suppose that should do the job.

Use treeview's Load event in the updatepanel's event trigger. This works for sure

Treeview Control How can I trap a callback function

In my web application I have an Ajax Treeview control which populates its child nodes via AJAX, and all is working beautifully except that all our pages turn on a "spinny" image whenever there is a postback either full or partial my problem is how can I trap the completion of the ajax postback so I can turn the spinny off?

I cannot find a treeview event that I can trap on the client side to do this.

I expect someone has ran into this issue before so any help would be gratly appriciated.

I have only recently started using AJAX and so far everything I have seen has been really good but I would to solve this issue.

Cheers

John

How are you populating the tree? What "Ajax Treeview control" are you using?

You should be able to attach a callback handler that will let you get rid of the "spinny", but without knowing your approach I can't recommend how to do this in your instance.

-Damien

Hi Damien

Here is the markup for the treeview I have removed the styling for berevity

<asp:TreeViewID="tvwProcess"runat="server"EnableClientScript="true"OnTreeNodePopulate="GetChildren"PopulateNodesFromClient="true"Style="overflow: auto; height: 490px">

</asp:TreeView>

GetChildren is a serverside method which populates the expanded node

Does this give you enough info?

Thanks

John

You should be able to use the ClientScript.GetCallbackEventReference to get a reference to the callback and then hide the image using the callback method (seehttp://west-wind.com/weblog/posts/2302.aspx for an example).

Hope this helps...

-Damien

Hi Damien

re:

I tried your suggestion and got the example from west-wind working fine and also this example from Microsoft http://msdn2.microsoft.com/en-us/library/ms153106.aspx

the problem I still have with the treeview is what event to attach it to. The logical option would be the "OnTreeNodeExpanded" but that looks for a server side methodAm I missing something?CheersJohn

Hi,

At the client side,the"OnTreeNodeExpanded" is the click event of the parent Node.

TreeView efficiency

I have a TreeView in an update panel. The Treeview is populated from an XmlDataSource.

I have another panel (ContentPanel) which is updated by this tree.

So, the only reason I have the TreeView in an update panel is so that the ContentPanel can be updated on a TreeNode click.

This works fine - everytime i click on a node of the TreeView, the ContentPanel is updated as expected.

However, when I checked the HttpHeaders and the Body sent by the cleint and the webserver, I noticed that when I click on a TreeView node, the response to the request contains the HTML for the entire tree again!

Why does the TreeHtml need to updated in this way???

Its incredibly inefficient (89k)!!!!

Am I doing something wrong?

Same problem for me...

However I think we not doing anything wrong.

If we click/select a node, it is actually a postback from the updatepanel, therefore the updatepanel refresh itself (sending the treeview again and again)

You can set

EnableClientScript="true"

for the treeview, but it only helps expanding and collapsing the nodes without a postback in my knowledge.

It would be nice a new ajax enabled treeview in the atlas control toolkit.

treeview expand depth 2 collapse to depth level 0.

I have treeview on update panel and loading folders based on user interaction. It works for depth level 2 but at this point clicking the node shows depth level 0 results. is there something I am missing?

here are few lines of crap...

Thanks for you help.

<asp:TreeViewid="SourceTreeView"runat="server"Width="100%"OnSelectedNodeChanged="SourceTreeView_SelectedNodeChanged"OnTreeNodeExpanded="SourceTreeView_TreeNodeExpanded"ShowCheckBoxes="Leaf"ImageSet="Simple"Height="100%"ExpandDepth="1"MaxDataBindDepth="10"NodeIndent="15">

<ParentNodeStyleFont-Bold="False"></ParentNodeStyle>

<HoverNodeStyleForeColor="#5555DD"Font-Underline="True"></HoverNodeStyle>

<SelectedNodeStyleHorizontalPadding="0px"ForeColor="#5555DD"VerticalPadding="0px"Font-Underline="True"></SelectedNodeStyle>

<NodeStyleNodeSpacing="0px"HorizontalPadding="0px"ForeColor="Black"VerticalPadding="0px"Font-Size="10pt"Font-Names="Tahoma"></NodeStyle>

</asp:TreeView>

I am adding nodes per users request using following code, which is same for depth 0,1 and 2.

newNode.Expanded =false;

newNode.ShowCheckBox =false;

newNode.PopulateOnDemand =true;newNode.SelectAction =TreeNodeSelectAction.Select;

treeNode.ChildNodes.Add(newNode);

sg20000:
is there something I am missing

You are missing, that the treeview is not supported in the updatepanel Tongue Tied

Check here:

UpdatePanel Control Overview

Maybe you are right and thanks for your help.

I found at some places forward slash was being used, i fixed that and while trying to make it work, made some other changes to node before adding to tree and seems like it is working. I think some nodes had / (creating some escape sequences) or something else to trigger wrapping of tree.

is that treeview on update panel will behave unpredictablly or there are some other issues?

sg20000:
is that treeview on update panel will behave unpredictablly or there are some other issues?

I'm also using treeview with updatepanel, regardless is it not supported.

Main issue which I found that the tree state (selected node, expanded/collapsed nodes state etc.) stays out sync when a postback occurs. Especially when you use any client side capability (populate on demand, enableclientscript=true).

For example:

- Treeview in up

- User coll/exp nodes (no postback yet)

- User select a node, partial postback, selectednodechanged handled for example.

- User select a different node, same as before, but coll/exp state messed up.

- etc.

Without client script features it's ok in up, but slow (big complicated markup, big viewstate etc.)

Wednesday, March 28, 2012

Tree view nested in Accordion taking two clicks to fire selectedNodeChanged event

TreeView "MyTreeView_Data" is undefined

Treeview & UpdatePanel - Assertion failed - cant find last / in base url

Treeview + Update Panel

TreeView + SelectedNodeChanged + UpdatePanel = Problems

TreeView + UpdatePanel Problems

Treeview acting strange in UpdatePanel

TreeView Ajax

TreeView Ajax

Treeview and beta1

Treeview and HoverMenuExtender

TreeView and UpdatePanel - Beta 2

TreeView and UpdatePanel

TreeView and UpdatePanel

TreeView and UpdatePanel

TreeView and update panel

TreeView checkboxes AutoPostBack with AJAX

Treeview Control How can I trap a callback function

TreeView efficiency

treeview expand depth 2 collapse to depth level 0.

ajax timercontrols

Blog Archive

About Me