ajax timercontrols: updatepanel

Showing posts with label updatepanel. Show all posts

Wednesday, March 28, 2012

Treating an ASCX control as independent

One huge disadvantage of the UpdatePanel control, IMHO, is that all of the Page life cycle reloads again.

I was wondering, when I just want to load a single control that has nothing to do with the rest of the stuff on the page, is this roundtrip really necessary?

I know that there's the client approach which says I can communicate with the server with minimal data and create all controls at the client-side, but that won't let me use server-controls and their benefits.

I thought of something that renders an ASCX control and serves its HTML, but it not covers everything, such as event firing.

Is my idea doable? Anyone bumped into this before?

Thanks!

If you want the benefits of the server controls you must also allow their life cycle to run. It's both the advantage and the disadvantage of the UpdatePanel.

Agreed... This is discussed here:http://encosia.com/index.php/2007/07/11/why-aspnet-ajax-updatepanels-are-dangerous

One option is to use ASP.NET PageMethods (also described in that link) which simplifies WebMethod calls and only returns results and not much overhead. You can also use multiple UpdatePanels so that you aren't refreshing so much.

Hope this helps,

-Damien

Tree, Menu, etc not usable in UpdatePanel. Any workarounds?

I spent a long (probably too long before checking the forums) time tracking down the "0.cells is null or not an object" problem. To come to find out that the tree, the menu, and the grid don't work with the UpdatePanel (See notes near bottom ofhere).

I'm wondering if there are any workarounds that anyone has come up with. This kinda sucks since part of my design was to use a goodly amount of popups that allow modifications and those are nicely handled using menus, trees, and such. I know that microsoft says they're working on some ajax based controls that wrap these other controls up. But the need is kinda here and now (Maybe I just don't have a latest update of ACT or something?) Anyway using Telerik or some other commercial control is just not feasible in my budget at the moment. So I thought I'd see if anyone had any workarounds.

For that matter does anyone have any workarounds for accordions to make them horizontal (to make them open and close left to right instead of up and down)?

I'm thinking that some other people have experienced some problems such as these and might be working on some ideas as far as workarounds.If so then perhaps we could "band together" and create an area on CodePlex (and possibly some referers at google, sourceforge and the like) to at least give some pointers to some other efforts to expand on the ACT.

Anyway just wanted to throw that alternate idea out there, but if anyone has any viable workarounds for the lack of support of trees, grids, and menus in the UpdatePanel, I and probably many others would be glad to hear about it.

Thanks in advance,
Christopher

The UpdatePanel included in the .Net framework 3.5 supports having treeview and menu controls in them. There is a go live license for VS 2008. Maybe you can use VS 2008

http://blogs.msdn.com/somasegar/archive/2007/09/08/asp-net-enhancements-in-vs2008-and-net-fx3-5.aspx

I am not sure that the TreeView is supported in .NET 3.5. My suggestion is to use any third pary javascript library for the treeview and use WebService for the data transfer.

yeah moving up to VS2k8 and moving up to .NET 3.X (3.5 in beta) doesn't seem like an option (at this point) to have this "design paradigm" adopted. It means to many other adoption points. Hmm I'll keep you all updated I guess as far as any solutions, but if anyone else has something to contribute I'm quite willing to work with them. In my mind this begs further investigation. ;-)

Controls that Are Not Compatible with UpdatePanel Controls

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.

Yes that's what I was saying in my original post when I said that they don't work with an update panel and referred to the document thru a link. So I guess I'm missing your point in posting that with no statements by you. Is there some workaround that I'm missing in my reading of it?

Thanks in advance,
Christopher

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

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 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 ExpandAll problem in beta 1, 2 with EnableClientScript="true"

I have a treeview problem inside an update panel since the first beta. In the last ctp no problem at all.

I have a treeview in the updatepanel with EnableClientScript="true". I have two button in the same update panel, that calls ExpandAll, and CollapseAll in server side click events. That works as expected: the updatepanel refresh the treeview with all node collapsed/expanded. However after then when I expand one node (that not cause a postback yet), and select a node (which now cause a postback), the nodes collapsed/expanded randomly after the updatepanel refresh.

It seems that the server side ExpandAll/CollapseAll could be out of the sync with the client side node expanding/collapsing.

It seems to me when EnableClientScript="true" for a treeview, the tree maintain the expanded/collapsed node in hidden fields, and that hidden field could be out of the sync after a server side ExpandAll/CollapseAll.

I write a small javascript function which collapse or expand all node on the cilent side for the treeview. Even the nodes collapsed state is persisted during postbacks/partial postbacks.

The bug still exist, but I will not use the server side ExpandAll in the future...

(just found by the docs that the treeview is not supported in the updatepanel officially, but many of us using it without main problems)

TreeView in an UpdatePanel workaround?

Hi,

I was wondering if anyone might have come across a posting of a workaround for a treeview in an update panel, from what i've read it was not supported in the latest ajax release due to time constraints placed on the development team?

The latest project i'm woking on places me in the spot where i need to get one going in these circumstances.

Cheers

CaffineFizz

We spent a lot of time trying to get our treeview to work inside an update panel, since it did work before the Beta releases, but I haven't seen any work around to allow you to dynamically change the tree after it is initially loaded, unless you get a 3rd party control.

Strange, I'm using V 1.0, downloaded it a week ago. I have atreeview inside of an update panel that is re-loaded via dropdowns (inanother panel) that trigger it's panel.

It works fine.

Is it adding or removing nodes without errors or a full postback?

Yes, if by "adding and removing nodes" you mean calling it's TreeNodePopulate event and adding child nodes on an expand.

Here's how I have it set up

UpdatePanel Filters

UpdatePanel Tree

InPage_Init a call is made to load X number of "filters" dynamically(indicated by records in a database) in the form of dropdownlists. (cascading) The filters are applied to the data that isused by the treeview. The dynamically loaded dropdownseither have a trigger for both updatepanels, or just the treeview panel (depending on if the dropdown is thefinal cascading filter.)

The treeview is then dynamically instantiated and added to it'sown update panel dynamically in Page_Init. The Pre_Renderevent has a toggle to see if the tree has been "Loaded". If not,it loads the tree data, which would use the default selected filters.

Both update panels are set to UpdateMode"Conditional." Upon selecting an item from the dropdown lists thetreeview is re-populated with different filtered data.

Upon"expanding" a node in the treeview the child nodes are added. Full postback? Well, as far as I can tell it isn't. I havetrouble "detecting" that via code, but I do know that the Pre_Renderevent is not fired for the page, which seems to be the only Page eventthat doesn't fire when an "Ajax" callback is made with ASP.Net usingcontrols that are update panel triggers. (or web service calls viaScriptManager for that matter.)

It all works, allcontrols are dynamically loaded. The only "static" items in the.aspx page are the UpdatePanel's themselves (and some other divs andtables and whatnot for formatting).

Are the nodes already there, just not expanded? Are you adding nodes using a form like Node1.Add(ChildNode1)?

mdenn:
Are the nodes already there, just notexpanded? Are you adding nodes using a form likeNode1.Add(ChildNode1)?

No, they aren't allreadythere. My initial loading of the page loads the root node, set'sit's TreeNodePopulate event, and expands just the root. Thisloads the initial Depth 1 nodes (by calling the populate event after Iexpand the root), which if they have children I set theirPopulateOnDemand to true, meaning their children get populate on theserver when the user expands the node (via .Add(node)) for the firsttime. If I set a break point in the event handler it fires on theserver to populate the children.

Just for accuracy, I am using version 1.0.61231.0 of the System.Web.Extensions.dll.

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 in Multiview clientscript problem in new beta

Hi,

I have a problem with one of my web page... for debugging purpose I created a simple test webpage to explain the problem.
Here it is:
An updatepanel containing a multiview.
In this multiview there's 2 view, each containing a tree view and a button to go to the other view.
The default activeview is the first one.

My problem is that only the treeview in the first view works.
The treeview in the 2nd view crashes with error "Microsoft JScript: 'TreeView2_Data' is undefined." when I click a node.
Of course if I set the enableclientscript property of the treeview to off then it works okay but it does a partial postback at each node collapse-expand...

My guess is that the clientscript is not injected correctly on view change but how can I fix that ?
Btw it used to work before I updated to Beta 1.0

Thanks a lot !

Jean-Sébastien Roy

I was able to repro it and report it to the developer..

thanks for the report....

Andres

Hi,

The TreeView control is not supported inside UpdatePanels in Atlas 1.0. A future release of Atlas will support this scenario. In Atlas 1.0 you can have the TreeView outside the UpdatePanel.

Thanks,

Eilon

Thanks to you both for the fast answers !

Placing a TreeView inside an UpdatePanel is not supported on the Beta. Please look a the following documentation page (under the "UpdatePanel Compatible Controls"):http://ajax.asp.net/docs/Overview/intro/partialpagerendering/updatepanelOverview.aspx. Full support for all controls will be available on the next release of ASP.NET.

Thanks,
Federico

I had a same problem. Seems like its not supported in Beta version. Does anyone know of a workaround?

Thanks

Hi,

UpdatePanel control is used for only partial updating/partial_page rendering. You can not use the updatePanel control for Treeview and someother controls like MenuView and FileUpload.

If you need more help on this check in below link under UpdatePanel Control.

http://ajax.asp.net/default.aspx

Pradeep Kumar

Treeview in Updatepanel gets lost when selecting node

We moved to the Beta and then our treeviews in updatepanels started acting strangely. Especially when a node was selected in a treeview that was populated in code after the first page load. It "randomly" collapses and expands nodes as you select a node. Its like its viewstate is messed up or ...

This behavior doesn't occur if the whole treeview i expanded when finished populating it. But it doesn't look so good if it's all expanded. Does anyone know how to collapse all nodes client side ? Cause that might be a workaround - serverside expand all nodes after populating and then clientside collapsing them - server side collapsing gives the random behaivor back !

I read some articles about how the treeviews scripts aren't registered in the scriptmanager which is required in Beta 1. And how treeviews i update panels aren't supported since the rarely are used that way. But the app doesn't look so good when a frequently used treeview causes a full postback of the page just to select a node - which Atlas updatepanel handled great and pretty quick in the AJAX Beta it doesn't work as well at all and is much slower.

Does anyone have the same problem or better yet a workaround while waiting for AJAX updatepanel supporting a treeview

We are having the same problem with the RC release. I didn't try it with other releases.

I use this script to open/close the treeview, with a little adjustment it should work for you too. Hope it helped

function

CloseTree(treeId)

{

//childnodes are contained in divsvar subDivs = document.getElementById(treeId).getElementsByTagName("div");for (i=0; i<subDivs.length; i++)

{

//tree lines are images contained in divs also, so we don't hide them because they will not be shown when the node is toggled into viewif (subDivs[i].id.length >0)

{

subDivs[i].style.display =

'none';

}

var imgs = document.getElementById(treeId).getElementsByTagName("img");for (j=0; j<imgs.length; j++ )

{

if ( imgs[j].alt.indexOf("Collapse") >=0 )

{

imgs[j].src = <%=

"'" + Page.ResolveURL("~/") +"'"%>+"Images/tree_collapsed.gif";

imgs[j].alt = imgs[j].alt.replace(

"Collapse","Expand");

}

function OpenTree(treeId)

{

//childnodes are contained in divsvar subDivs = document.getElementById(treeId).getElementsByTagName("div");for (i=0; i<subDivs.length; i++)

{

subDivs[i].style.display =

'block';

}

var imgs = document.getElementById(treeId).getElementsByTagName("img");for (j=0; j<imgs.length; j++ )

{

if ( imgs[j].alt.indexOf("Expand") >=0 )

{

imgs[j].src = <%=

"'" + Page.ResolveURL("~/") +"'"%> +"Images/tree_expanded.gif";

imgs[j].alt = imgs[j].alt.replace(

"Expand","Collapse");

}

I have the same issue. Were you able to resolve it? Would appreciate any feed back.

Grewal.

TreeView in UpdatePanel : Heres a working one

Okay, I've seen this mentioned a bunch of times, people can't get TreeView's working in an update panel. Well I've never had a problem. What I figured out was I used a different methodology to fill my tree. Instead of using the "TreeNodeExpanded" event I use the "TreeNodePopulate" event, and set any node that has children's "PopulateOnDemand" property to true. Here's a full solution that uses your file system as an example (since everyone has one) that works for me (running as a file system site at least since I have admin privie's to my drive.)

Either way it demonstrates the concept, and a working solution that uses a TreeView inside of an UpdatePanel. Hopefully this is helpful. If I'm way off base and this isn't REALLY working let me know, but I have a rather complex dynamically loaded treeview solution that works in a production app, and as far as I can tell it is completly populated server side via ajax postbacks.

@dotnet.itags.org.PageLanguage="C#" %>

@dotnet.itags.org.RegisterAssembly="System.Web.Extensions"Namespace="System.Web.UI"TagPrefix="asp" %>

@dotnet.itags.org.ImportNamespace="System.IO" %>

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

scriptrunat="server">

protectedvoid Page_Load(object sender,EventArgs e)

{

if (!Page.IsPostBack)

{

BuildTree();

}

protectedvoid BuildTree()

{

tvFiles.Nodes.Clear();

TreeNode root =newTreeNode("Drives",@dotnet.itags.org."0");

root.SelectAction =

TreeNodeSelectAction.None;

root.PopulateOnDemand =

true;

root.Selected =

false;

tvFiles.Nodes.Add(root);

tvFiles.ExpandDepth = 1;

root.Expand();

}

protectedvoid tvFiles_TreeNodePopulate(object sender,TreeNodeEventArgs e)

{

TreeNode parentNode = e.Node;if (parentNode.Value ==@dotnet.itags.org."0")

{

PopulateDrives(parentNode);

}

else

{

PopulateNormal(parentNode);

}

protectedvoid PopulateDrives(TreeNode node)

{

string[] drives =Environment.GetLogicalDrives();foreach (string drivein drives)

{

TreeNode driveNode =newTreeNode(drive, drive);

driveNode.SelectAction =

TreeNodeSelectAction.None;

driveNode.Selected =

false;

driveNode.PopulateOnDemand =

true;

node.ChildNodes.Add(driveNode);

}

protectedvoid PopulateNormal(TreeNode node)

{

string path = node.Value;try

{

DirectoryInfo directory =newDirectoryInfo(path);foreach (FileSystemInfo childin directory.GetFileSystemInfos())

{

TreeNode childNode =newTreeNode();

childNode.Text = child.Name;

childNode.Value = child.FullName;

if (childisDirectoryInfo)

{

if (((DirectoryInfo)child).GetFileSystemInfos().Length > 0)

{

childNode.PopulateOnDemand =

true;

}

node.ChildNodes.Add(childNode);

}

catch

{

//HACK: ignore erros, probably security, just don't add the nodes

}

script>

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

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

head>

body><formid="form1"runat="server"><div><asp:ScriptManagerrunat="server"id="scriptManager1"></asp:ScriptManager><asp:UpdatePanelrunat="server"id="treePanel"><ContentTemplate><asp:TreeViewID="tvFiles"runat="server"OnTreeNodePopulate="tvFiles_TreeNodePopulate"></asp:TreeView></ContentTemplate></asp:UpdatePanel>

</div></form>

body>

html>Nice one.

This is excellent, I was close to dropping the TreeView and rolling my own.

However I now have the problem of persisting the TreeView state accross postbacks. The nodes are being populated from a database through the NodePopulated event. Previously we had a function in NodeExpanded and NodeCollapsed that saved the state to a session variable. Any ideas on the best way to do this now?

On closer inspection this doesn't work as expected. It doesn't appear to make use of the UpdatePanel at all, its just using its PopulateOnDemand feature that was always there. When I have another UpdatePanel on the page and cause a postback inside that, the next attempt to expand a node throws back an error:

Invalid postback or callback argument. Event validation is enabledusing <pages enableEventValidation="true"/> in configuration or<%@. Page EnableEventValidation="true" %> in a page. For securitypurposes, this feature verifies that arguments to postback or callbackevents originate from the server control that originally rendered them.If the data is valid and expected, use theClientScriptManager.RegisterForEventValidation method in order toregister the postback or callback data for validation.

Heres the changed code:

<%@. Page Language="C#" %><%@. Register Assembly="System.Web.Extensions" Namespace="System.Web.UI" TagPrefix="asp" %><%@. Import Namespace="System.IO" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { BuildTree(); } } protected void BuildTree() { tvFiles.Nodes.Clear(); TreeNode root = new TreeNode("Drives", @."0"); root.SelectAction = TreeNodeSelectAction.None; root.PopulateOnDemand = true; root.Selected = false; tvFiles.Nodes.Add(root); tvFiles.ExpandDepth = 1; root.Expand(); } protected void tvFiles_TreeNodePopulate(object sender, TreeNodeEventArgs e) { TreeNode parentNode = e.Node; if (parentNode.Value == @."0") { PopulateDrives(parentNode); } else { PopulateNormal(parentNode); } } protected void PopulateDrives(TreeNode node) { string[] drives = Environment.GetLogicalDrives(); foreach (string drive in drives) { TreeNode driveNode = new TreeNode(drive, drive); driveNode.SelectAction = TreeNodeSelectAction.None; driveNode.Selected = false; driveNode.PopulateOnDemand = true; node.ChildNodes.Add(driveNode); } } protected void PopulateNormal(TreeNode node) { string path = node.Value; try { DirectoryInfo directory = new DirectoryInfo(path); foreach (FileSystemInfo child in directory.GetFileSystemInfos()) { TreeNode childNode = new TreeNode(); childNode.Text = child.Name; childNode.Value = child.FullName; if (child is DirectoryInfo) { if (((DirectoryInfo)child).GetFileSystemInfos().Length > 0) { childNode.PopulateOnDemand = true; } } node.ChildNodes.Add(childNode); } } catch { //HACK: ignore erros, probably security, just don't add the nodes } }</script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"><title>Untitled Page</title></head><body><form id="form1" runat="server"><div><asp:ScriptManager runat="server" id="scriptManager1"></asp:ScriptManager><asp:UpdateProgress ID="prog" runat="server"> <ProgressTemplate>Working...</ProgressTemplate></asp:UpdateProgress><asp:UpdatePanel runat="server" id="treePanel" UpdateMode="conditional"><ContentTemplate><asp:TreeView ID="tvFiles" runat="server" OnTreeNodePopulate="tvFiles_TreeNodePopulate"></asp:TreeView><input type="submit" id="btn1" runat="server" value="same panel" /></ContentTemplate></asp:UpdatePanel> <asp:UpdatePanel ID="upd1" runat="server" UpdateMode="conditional"> <ContentTemplate> <input type="submit" id="btn2" runat="server" value="other panel" /> </ContentTemplate> </asp:UpdatePanel> </div></form></body></html>

Thanks badgrs. My current project has the treeview alwaysbeing re-initialized on any updatepanel postback. That is quiteunfortunate. I will need to evaluate wether to use theUpdatePanel now. I may end up doing a part UpdatePanel part"manual" solution where the items that are selected in the TreeView donot use UpdatePanel tech, but custom web service call-backs.

Thanks for the input.

TreeView in updatePanel , problem when visible is false

I have constructed a very simple webpage , an atlas updatepanel and TreeView inside and every thing goes O.k , until I set the initial value of the visible property of the treeview to false , here I added a button that when clicked , the visible of the tree is set back to true, now after the tree is visible , it is a big problem , a lot of javascript errors occurs and its nodes can't be collapsed or expanded and when clicking on some node the event SelectedNodeChanged is not raisedAny help to solve this problem is welcomed and appreciated...Thank you

TreeView control is not supported with UpdatePanel Control.

Actually , treeview is supported in atlas UpdatePanel and it does work

The only problem is that when the initial value of visible property of the tree is false

Any help is Appreciated

treeview in update panel does not show styles such as background color,fore color, etc

i have changed the backcolor of my treeview nodes and selected nodes to different colors

wheni draw the treeview outside a updatepanel it shows the colors,

however if I draw it inside the updatepanel it does not show the colors

any help?

Try to post some of your codes here.I'd like to check this. Try to specify postback for the asp:TreeView.
Here are some sample codes about asp:TreeView for your reference.
<WebPart:webpartmanager id="WebPartManager1" runat="server" Personalization-Enabled="true"></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>
</div
Wish the above can help you.

Wednesday, March 28, 2012

Treating an ASCX control as independent

Tree, Menu, etc not usable in UpdatePanel. Any workarounds?

Controls that Are Not Compatible with UpdatePanel Controls

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

TreeView + SelectedNodeChanged + UpdatePanel = Problems

TreeView + UpdatePanel Problems

Treeview acting strange in UpdatePanel

TreeView Ajax

Treeview and beta1

TreeView and UpdatePanel - Beta 2

TreeView and UpdatePanel

TreeView and UpdatePanel

TreeView and UpdatePanel

Treeview ExpandAll problem in beta 1, 2 with EnableClientScript="true"

TreeView in an UpdatePanel workaround?

TREEVIEW in an UPDATEPANEL

treeview in Multiview clientscript problem in new beta

Treeview in Updatepanel gets lost when selecting node

TreeView in UpdatePanel : Heres a working one

TreeView in updatePanel , problem when visible is false

treeview in update panel does not show styles such as background color,fore color, etc

ajax timercontrols

Blog Archive

About Me