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:

function TreeView_PopulateNode(data, index, node, selectNode, selectImageNode, lineType, text, path, databound, datapath, parentIsLast) {
var context = new Object();
context.data = data;
context.node = node;
context.selectNode = selectNode;
context.selectImageNode = selectImageNode;
context.lineType = lineType;
context.index = index;
context.isChecked = "f";
var tr = WebForm_GetParentByTagName(node, "TR");
if (tr) {
var checkbox = tr.getElementsByTagName("INPUT");
if (checkbox && (checkbox.length > 0)) {
for (var i = 0; i < checkbox.length; i++) {
if (checkbox[i].type.toLowerCase() == "checkbox") {
if (checkbox[i].checked) {
context.isChecked = "t";
}
break;
}
}
}
}
var param = index + "|" + data.lastIndex + "|" + databound + context.isChecked + parentIsLast + "|" +
text.length + "|" + text + datapath.length + "|" + datapath + path;
TreeView_PopulateNodeDoCallBack(context, param);
}

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.

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">

<ContentTemplate>

<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>

.....

</DataBindings>
......

</asp:TreeView>

</div>

</ContentTemplate>

<Triggers>

<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 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 in an UPDATEPANEL

This is a simple one, I know it...

I have a treeview inside of an updatepanel. The treeview is recursively populated from a database table... Everything works properly, except...
When I select a node, the whole thing loads again underneat it...

This is the code that fills the treeview control...

Protected Sub fillTree(ByVal n As TreeNode, ByVal pid As Integer)
Dim sql As New SqlConnection(ConfigurationManager.ConnectionStrings("sqlcon").ToString)
sql.Open()
Dim cmd As SqlDataReader = New SqlCommand("SELECT * FROM quarem_PortfolioFolders WHERE OwnerID='" & Web.Security.Membership.GetUser.ProviderUserKey.ToString & "' AND FolderParent=" & pid, sql).ExecuteReader

While cmd.Read
Dim newnode As New TreeNode(cmd("FolderName").ToString, cmd("FolderID"))
fillTree(newnode, cmd("FolderID"))
If IsDBNull(n) Then
portfolders.Nodes.Add(newnode)
newnode.Expanded = False
newnode.Value = cmd("FolderID")
newnode.SelectAction = TreeNodeSelectAction.Select
Else
n.ChildNodes.Add(newnode)
newnode.Expanded = False
newnode.Value = cmd("FolderID")
newnode.SelectAction = TreeNodeSelectAction.Select
End If
End While

cmd.Close()
sql.Close()
End Sub

This runs in Page_Load.

My SelectedNodeChanged sub simple updates the updatepanel that houses a repeater.
As I said, everything works great except that I get the tree loading itself over and over again!

Any suggestions?

I am truly sorry for wasting everyone's time! LOL

Obviously, the answer is IF NOT ISPOSTBACK...
I thought the directive was set, and when I went back to look at the code, I noticed...

Again... if you read this, PLEASE accept my apology!

Treeview inside updatepanel postingback on selectednodechanged

Hi,

I'm having problem with a treeview inside an updatepanel on my page. The treeview is populated from the client on the treenode pouplate event. The selection of a node in the treeview triggers the content of another updatepanel to be displayed according to the selected node. Everything works fine exept that the whole tree is postedback on the selectednodechanged event even tough the triggers for that update panel is on treenodepopulate.

Here's the code :

<%-- The treeview --%> <atlas:UpdatePanel ID="uptv" runat="server" mode="conditional" 
 <ContentTemplate
 <asp:Panel ID="panTree" runat="server" Height="600px" ScrollBars="Auto" Style="z-index: 102;
 left: 3px; position:absolute; top:5px;" Width="450px" CssClass="bordures"
 <asp:TreeView ID="tvEquipement" runat="server" Height="100%" Style="z-index: 100; left: 0px;
 position: absolute; top: 0px" Width="100%" ForeColor="ControlText" ExpandDepth="2" NodeIndent="10" 
 <SelectedNodeStyle BackColor="#D09200" Font-Bold="True" ForeColor="HighlightText" BorderColor="HighlightText" />
 <RootNodeStyle Font-Bold="True" /
 </asp:TreeView
 </asp:Panel
 </ContentTemplate
 <Triggers
 <atlas:ControlEventTrigger ControlID="tvEquipement" EventName="TreeNodePopulate" /
 </Triggers
 </atlas:UpdatePanel
 <atlas:UpdatePanel ID="upInfos" runat="server" mode="conditional" 
 <ContentTemplate>
<%-- stuff based on the selected node--%> </ContentTemplate
 <Triggers
 <asp:ControlEventTrigger ControlID="tvEquipement" EventName="SelectedNodeChanged" /
 </Triggers
 </atlas:UpdatePanel>

Any hep or idea would be greatly appreciated.

Thanks,

Max

The treeview is inside the update panel and childrenAsTriggers is set to true (Default is true). Therefore, if you click on control inside the update panel it would result in the
update panel getting updated. What you have to do is set ChildrenAsTriggers = false for the update panel with treeview.

On a different note: Treeview inside an update panel is not a supported scenario.

vineetc

Thanks for your reply. I don't seem to have that property. Is this a new feature from the Ajax Beta release. I'm still working with the last Atlas release.

The tree wasn't in an updatepanel at first, but I had to put it in one because the selectedvalue property was messed up when outside the updatepanel.

Max

Ajax beta release has this property. Also Property "Mode" of the update panel is renamed to "UpdateMode".

vineetc

TreeView populated programatically in Atlas UpdatePanel

Hi there,

I'm fairly new to Atlas and ASP.NET, so perhaps this question is obvious (I apologise).

I have created a page which essentially contains this information:

<asp:Content ID="Content1" ContentPlaceHolderID="MainPagePlaceholder" Runat="Server">
<atlas:UpdatePanel ID="AjaxMultiMediaPanel" mode="Conditional" runat="server">
<ContentTemplate>
<asp:Table ID="MultiMediaTable" CssClass="MultiMediaTable" runat="server" Height="193px" Width="274px">
<asp:TableRow runat="server">
<asp:TableCell runat="server" CssClass="TableTopAlign">
<cc1:MediaPlayer ID="MediaPlayer1" runat="server"></cc1:MediaPlayer>
<atlas:UpdateProgress runat="server" ID="progress">
<ProgressTemplate>
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/SpinningBall.gif" /> Reading UPnP Directory
</ProgressTemplate>
</atlas:UpdateProgress>
</asp:TableCell>
<asp:TableCell runat="server" CssClass="TableTopAlign">
<asp:TreeView ID="TreeView1" runat="server" >
<ParentNodeStyle CssClass="TreeParentNodeStyle" />
<HoverNodeStyle CssClass="TreeHooverStyle" />
<RootNodeStyle CssClass="TreeRootNodeStyle" />
<LeafNodeStyle CssClass="TreeLeafStyle" />
<NodeStyle CssClass="TreeNodeStyle" />
</asp:TreeView>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow runat="server">
<asp:TableCell runat="server">
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Play" />
<asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Load UPnP Info" />
</asp:TableCell>
<asp:TableCell>
<asp:Label ID="Label1" runat="server" Text="" />
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</ContentTemplate>
</atlas:UpdatePanel
</asp:Content>

When Button2 is pressed, I programatically populate the TreeView (using c# to recursively build the tree). This works without problems when I do NOT use Atlas, except of course in that case the page refreshes after about 10 seconds. Now, using the code above, The Progress Update image and text is shown for about 10 seconds, but after that the page 'freezes' for over a minute. I have tried triggers to force a refresh, programatically forcing a refresh, but nothing helps. If I at the end of my tree-population code turn set TreeView1.Visible = false; then the page does not freeze.

It appears that the population of the treeview somehow causes Atlas to do 'something' for an awful long time.

If possible, I would appreciate any help any of you experts can offer.

- Anders

P.S. The tree has a depth of about 4-5 levels max, with about 100 items. Nothing crazy. The 10 second delay is due to some other UPnP lookups I'm doing, not because it takes a long time to build the tree.

See also:similar discussion

A count of my items reveals 2685 of them, a bit more than stated above.

Hi Anders

Did you ever find out a solution to this problem? I have been having the same problem where a TreeView inside an UpdatePanel takes a very long time to refresh.

Using Fiddler, I found out that the problem is the various images used by the TreeView control. Outside an UpdatePanel, the browser makes only one request for an image, regardless of the number of times its used. Inside the UpdatePanel, the browser makes a request for each and every instance of an image.

I don't know if this is a problem with the IE cache or the way Atlas is processing the resulting page.

The solution to this has so far eluded me. The only thing I can do is to reduce the number of images used by the TreeView control, but that quickly makes it useless.

Cheers,

- Dan

Hi Dan,

No solution so far. I had to drop it and just create the site using other widgets. Not quite as cool, but at least it works.

http://ajax.asp.net/docs/overview/UpdatePanelOverview.aspx#UpdatePanelCompatibleControls

I had same problem. Finally, I setup a full postback trigger to the control that will force the repaint.
In my case, I had a button so my trigger code look like this:
<Triggers>
<asp:PostBackTriggerControlID="btnBack"/>
<asp:PostBackTriggerControlID="btnNext"/>
</Triggers>

I had the same problem, but I am still using Atlas, I don't wanna update until official version. And atlas UpdatePanel does not have PostBackTrigger, do you know how to solve it this problem witt Atlas?
If you haven't upgraded to the latest version by now, then you're going to be in a world of hurt when the RTM is released. There have been MANY breaking changes from ATLAS and it would be wise to forget ATLAS and move forward.

Treeview programatically populated with webservice

I'm trying to display a loading animation and background color while a treeview is populated by a webservice. I'm implementing the ajax incremental display pattern by just loading a div for a menu and the Loading animation in it's own div at the start. The java script calls a ajax web service to programmatically populate a treeview which I want to display in the menu div. The only thing I don't know how to do is get the populated Treeview control from the webservice to the actual website.

Here is my javascript located in the head of the menu.aspx page:

<script type="text/javascript" language="JavaScript">
<!--
 function pageLoad() {
 MenuService.LoadMenu(OnComplete,OnTimeOut,OnError);
 }
 function OnComplete(result){
 document.getElementById("menuLoad").style.display="none";//erases loading Message
 }
 function OnTimeOut(result){
 alert("Timeout")
 }
 function OnError(result){
 alert("Error")
 }
 // --></script>

 <form id="form1" runat="server">
 <asp:ScriptManager ID="ScriptManager1" runat="server">
 <Services>
 <asp:ServiceReference Path="MenuService.asmx" />
 </Services>
 </asp:ScriptManager>
 <div id="menuLoad"><IMG src="Resources/Images/ajax-loader-Menu.gif" /> Loading Menu...</div>
 <div id="menu">
 </div>
 </form>

Can anyone help with my problem? I doubt it is too complex, I'm just very new at using Ajax and web services. Should me web service return the treeview? or what? Is there a better way to do what I'm intending?

Thanks for the help in advance class='cmt'>//erases loading Message } function OnTimeOut(result){ alert("Timeout") } function OnError(result){ alert("Error") }// -->

I found any easier way to do this which out having to use a webservice, It initially loads a Page that Contains the Loading message and graphic and then using javascript to load the actual menu which is a completely different aspx page. The new page just loads the nodes of the treeview in the code behind.

MenuLoading.aspx:

<head runat="server"> <title>Menu</title> <link href="Resources/Css/Site.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" language="JavaScript"><!-- function pageLoad() { document.location.href="Menu.aspx" } // --></script></head><body onload="pageLoad()"> <form id="form1" runat="server"> <div id="menuLoad"><IMG src="Resources/Images/ajax-loader-Menu.gif" /> Loading Menu...</div> </form></body>

menu.aspx:

 
<head runat="server"> <title>Menu</title> <link href="Resources/Css/Site.css" rel="stylesheet" type="text/css" /></head><body> <form id="form1" runat="server"> <div id="menu"> <asp:TreeView ID="TreeView1" runat="server" ExpandDepth="1" ImageSet="XPFileExplorer" ShowLines="True" NodeIndent="5" OnSelectedNodeChanged="TreeView1_SelectedNodeChanged"> <HoverNodeStyle ForeColor="White" BackColor="#47678E" /> <LeafNodeStyle ImageUrl="Resources/Images/Grid.bmp" HorizontalPadding="2px" /> <NodeStyle Font-Names="Tahoma" Font-Size="8pt" ForeColor="Black"/> </asp:TreeView> </div> </form></body>
 Hopefully I clearly explained my solution.

Trouble getting Value out of DynamicPopulate Populated Control

Hi:

I'm using a combination of AutoComplete and DynamicPopulate out of the AJAX Toolkit. The AutoComplete polls my Active Directory, then sends the selected name to the DynamicPopulate control. The DP control then sends me back an email address. Since the DP control will not populate a textbox's "Text" value, I decided to use a label. The label populates properly on the page, however, when I try to pull the value through my code, the label's text value is "". All population using the DP is done before the call for the values. Does anyone have any suggestions?

The label is being populated after the page loads; ASP.NET is a server side language, since the page hasnt posted back to the server yet, your code still thinks the value is empty.

Thanks for your reply. I understand why I can't get the value out, and I'm trying to prevent a postback, however, is there any possible other way to get these values out? I've tried a javascript "hacky" way to get the value into an HTML control, then finding the control to get it's value, but that's proving to be quite a feat in itself. Any suggestions?

Here's the set up:

I have a web service with two methods. One goes to my Active Directory and does AutoComplete on the name. Onblur, it calls the other method which takes the text in the AutoComplete text box and sends it back through the directory, which then returns the email address. A DynamicPopulate control populates a label (which is going to be hidden) in order for me to grab the email address. My structure is lenient, so any suggestions would be greatly appreciated!

Thanks

John

I'm having somewhat the same problem!

I use the DynamicPopulateextender to populate at Panel with information from a webservice. It works just fine but now i want to fetch the info and save it. If u get it to work, please tell me :)