ajax timercontrols: code

Showing posts with label code. Show all posts

Wednesday, March 28, 2012

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 in Ajax.Net

Hi,

I want to use Treeview control using Ajax.Net, that should refreshed without postback.
Please provide me guidance or sample code.

Thanks in Advance.

The Treeview control is not supported in the current release of ASP.NET Ajax. I have heard of people getting it working though by manually doing changes in the prerender event, although when we tried that there were always some errors. I would suggest the telerik Tree control, although it isn't free..

Monday, March 26, 2012

Treeview Malfunction In Update panel

If I put a treeview in an update pannel and put any code in its expand /collapse methods the treeview closes the previous node that you expand. This is fine but when I expand a node and try to collapse that same node it does not collapse but rather stay expanded. Therefore I gathered it does the opposite action to the previously clicked node.

Why does this happen in the update panel, it doesn't happen without it?

The treeview control is not supported officially in the updatepanel!

One problem is that (I think) the treeview use hidden fields to maintain the expanded state of the nodes, and that hidden field stay out of the sync (especially when you use EnableClientScript="true" also). There are tons of other treeview features which not works correctly in the updatepanel.

treeview, accordion and updatepanels ;)

hello, here is my problem, i'll try to explain my page structure

on my site, i use treeviews (filled by code from hierarchical database) in several accordion panes to navigate on my page

so, i've :

<cc1:Accordion ...>

<Panes>

<cc1:AccordionPane>

<asp:TreeView>...</asp:TreeView>

</cc1:AccordionPane>

.. 2nd pane with a treeview, and so on...

</Panes>

</cc1:Accordion>

my accordion acts like a "menu" to choose which type of data you want to browse

when my user clicks on a node of one of my treeviews (the one which is in the active accordion pane obviously), it sets the value of an HiddenField to the selected node value

in the main part of the page, i've a formview which displays data (with the select parameter bound to the hiddenfield value)

and it's works Wink

but sometimes, some data changes made in the formview need to be done in the treeviews too (node label for instance)

but I don't how to do that

currently, my treeviews are in an accordion which is NOT is an updatepanel

but if i put the accordion (containing the treeviews) is an updapanel, it don't work, clearly there is a problem with the HiddenField (which links treeviews and formview)

I've tried to put the hiddenfield at different level (inside/outside the updatepannel), no result

please help me to choose a nice way to "ajax"-reload treeviews inside accordion on item updated event of the formview

thanks

Hi Zarzar,

My understanding of your issue is that you want to implement this function. When click on the TreeView node , the main part where a FormView is located will be refreshed. Meanwhile , when the FormView changes , it selected TreeNode will changed correspond to the FormView in turn. Your Accordion + TreeView act like a navigate bar. If I have misunderstood , please feel free to let me know.

As far as I know, TreeView is incompatible with UpdatePanel.

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.

thanks for answering

Jonathan Shen – MSFT:
My understanding of your issue is that you want to implement this function. When click on the TreeView node , the main part where a FormView is located will be refreshed. Meanwhile , when the FormView changes , it selected TreeNode will changed correspond to the FormView in turn. Your Accordion + TreeView act like a navigate bar. If I have misunderstood , please feel free to let me know.

well, perfect understanding!

it seems clear that Treeview is not the best friend of UpdatePanel Stick out tongue

if I understand, I've to remove my FormView from the UpdatePanel if I want a synchronous postback to be launched and my trees to be refreshed ?

Hi Zarzar,

zarzar:
if I understand, I've to remove my FormView from the UpdatePanel if I want a synchronous postback to be launched and my trees to be refreshed ?

Yes, as far as I know. It is the easiest way though not your willing.

Another way is use Javascript to find the Node and change its CSS style to make it as "selected", when the FormView is modified and a synchronous postback has been lauched. (Make sure that you have removed the TreeView out of the UpdatePanel).

See here is the generated HTML of a TreeNode.

<table cellpadding="0" cellspacing="0" style="border-width:0;">
<tr>
<td><div style="width:20px;height:1px"></div></td><td><div style="width:20px;height:1px"></div></td><td><div style="width:20px;height:1px"></div></td><td><img src="http://pics.10026.com/?src=/ControlToolkitTest/WebResource.axd?d=MYZni0kLx_fLYO5SLREkCaFRyyDbYHURF369ULcvgUM1&t=633223348596789238" alt="" /></td><td style="white-space:nowrap;"><a class="CourseFSTreeView_0" href="http://links.10026.com/?link=javascript:__doPostBack('CourseFSTreeView','sMy Computer\\Favorites\\Technology\\Microsoft')" onclick="TreeView_SelectNode(CourseFSTreeView_Data, this,'CourseFSTreeViewt6');" id="CourseFSTreeViewt6">Microsoft</a></td>
</tr>
</table>

You can use Javascript to get all <a> element by using document.getElementByTagName("a") , then find the selected item by traversing the array(for example , use a.innerText =="Microsoft"). Now, you can change its CSS style(Make sure not to click on it , or it will be refreshed by sending a postback).

This solution sounds great ,but it is so complex to give a whole sample. We should consider the cross-browser issues. For example in IE we can use a.innerText , but we should use a.textContent on Firefox.

So , in my opnion , you should take the former one. Good luck. Surprise

Hope this help.

Best regards,

Jonathan

Treeviw within an Accordion Pane

I have mocked up some code to illustrate my point.
The pane hides the expanded treeview (or doesn't expand along with it)
and any controls under the treeview this may be considered a bug.
I would like some input on how I could get around this.

To see my point in action, expand the treeview in the code below, notice the textbox disappears.
click the pane 2 header, then the pane 1 header to reveal the whold treeview.
collapse the treeview and see a gap between the panes.

1<%@dotnet.itags.org. Page Language="VB" %>23<%@dotnet.itags.org. Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %>4<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">56<script runat="server">7 Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)8 Dim tree As TreeView = Pane1.ContentContainer.FindControl("treeview")9 Dim node As TreeNode10 Dim root As New TreeNode11 root.Text = "root"12 tree.Nodes.Add(root)13 Dim x As Integer14 For x = 1 To 1015 node = New TreeNode16 node.Text = "Data " & x.ToString17 root.ChildNodes.Add(node)18 Next19 tree.CollapseAll()20 End Sub21</script>2223<html xmlns="http://www.w3.org/1999/xhtml">24<head runat="server">25 <title>Accordion/Treeview Test</title>26</head>27<body>28 <form id="form1" runat="server">29 <div>30 <atlas:ScriptManager ID="Script" runat="server" />31 <atlasToolkit:Accordion ID="acc" runat="server" Width="300" FadeTransitions="true"32 FramesPerSecond="40" TransitionDuration="250">33 <atlasToolkit:AccordionPane ID="Pane1" runat="server" BorderColor="black">34 <Header>35 <table width="100%" bgcolor="silver">36 <tr>37 <td>Pane 1</td>38 </tr>39 </table>40 </Header>41 <Content>42 <asp:TreeView ID="treeview" runat="server" ShowLines="true" />43 <asp:TextBox ID="txt" runat="server" />44 </Content>45 </atlasToolkit:AccordionPane>46 <atlasToolkit:AccordionPane ID="Pane2" runat="server" BorderColor="black">47 <Header>48 <table width="100%" bgcolor="olive">49 <tr>50 <td>Pane 2</td>51 </tr>52 </table>53 </Header>54 <Content>Content Here</Content>55 </atlasToolkit:AccordionPane>56 </atlasToolkit:Accordion>57 </div>58 </form>59</body>60</html>

Hi Chris,

This isissue 1560 and we're hoping to get it fixed by the next release.

Thanks,
Ted

Ted,

Is this issue fixed in the latest release?

My current workaround is to add a panel with a vertical scrollbar. I would like it to look cleaner without the panel..

Chris

Hi Ted,

I saw that this issue was marked as closed. But my example running on IE7 with today's release (12/14) still yields the same result.

Thanks,
Chris

Ted, here is an updated version of the code that works with the RTM.

this is still not working correctly. open the treeview and you'll see what I mean.

<%@. Page Language="VB" %>
<%@. 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">

<script runat="server">
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
Dim tree As TreeView = Pane1.ContentContainer.FindControl("treeview")
Dim node As TreeNode
Dim root As New TreeNode
root.Text = "root"
tree.Nodes.Add(root)
Dim x As Integer
For x = 1 To 10
node = New TreeNode
node.Text = "Data " & x.ToString
root.ChildNodes.Add(node)
Next
tree.CollapseAll()
End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Accordion/Treeview Test</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="Script" runat="server" />
<ajaxToolkit:Accordion ID="acc" runat="server" Width="300" FadeTransitions="true"
FramesPerSecond="40" TransitionDuration="250">
<panes>
<ajaxToolkit:AccordionPane ID="Pane1" runat="server" BorderColor="black">
<Header>
<table width="100%" bgcolor="silver">
<tr>
<td>Pane 1</td>
</tr>
</table>
</Header>
<Content>
<asp:TreeView ID="treeview" runat="server" ShowLines="true" />
<asp:TextBox ID="txt" runat="server" />
</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="Pane2" runat="server" BorderColor="black">
<Header>
<table width="100%" bgcolor="olive">
<tr>
<td>Pane 2</td>
</tr>
</table>
</Header>
<Content>Content Here</Content>
</ajaxToolkit:AccordionPane>
</panes>
</ajaxToolkit:Accordion>
</div>
</form>
</body>
</html>

Im having the same problems with the latest release but with the new calendar extender - when i click into my textbox and the calendar pops up it is hidden behind the accordion. It looks like the same problem as the treeview bug in that anything dynamic and the accordion panes dont re-size.

Does anyone have a workaround for this problem??

TIA

Ive found that if you remove the cssclass from the calendar extender the problem goes away and the calendar pops up outside the accordion.

I have the exact same issue as CConchel describes, however with a CollapsiblePanelExtender. There seem to be quite some issues, even on this Forum, regarding dynamic resizing of the AccordionControl where content is just truncated. However, I still have found no solution for this problem. I found a similar issue with a javascript solution but have no clue on how to implement this.

Ted:
It doesn't seem to be fixed in the latest release of the toolkit (Release 10201 - feb-01-2007)

Omen:
For me, removing the CssClass from all elements does not seem to work in this case.

Does anyone have asolution - or workaround - for this?

This seems to be fixed in theupcoming 10301 release of the toolkit. I have compiled the development build from CodePlex and it works, along side with many other fixes (such as IE crash and such).

Well done, guys!

Hi,

Yes, we've completely reworked the Accordion so its layout will be a lot more flexible - thanks mostly to feedback generated via these forums and CodePlex. We just shipped the latest release, so try it if you haven't already.

Thanks,
Ted

Trigger a ModalPopupExtender from LinkButton in a column on a GridviewRow

Hi,

Has anyone got any sample code for using a linkbutton in gridview as the targetcontrol for a modalpopupextender. I have tried several ways but it seems the clientsideid is only temporary since it won't using it.

Any ideas or thoughts in this will be helpful.

Frederik

If you create on Modal Popup Control outside of the gridview and point it at a dummy button (which you can hide), then you can find the modal popup from client side code (called by your linkbutton) using $find(), and then call the modal popup's show() method to get it to pop-up.

I am guessing that you probably want to load up the modalpopup with content related to a row in the grid. In this case, you might want to postback to the server, load the content and then show the modalpopup by calling the Show() method all from code behind. You will still need to use a dummy button as outlined by skirkland so that you can programmatically control the modalpopup visibility.

Trigger does not work

I have a trigger, which is set to lblProgress.Text property. Once the user clicks the button, the code changes the property, but nothing is displayed untill the onclick event finish. Should not be the Atlas asynchronous?

Default.aspx:

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

DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

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

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

head>

body><formid="form1"runat="server"><atlas:ScriptManagerID="scriptManager"EnablePartialRendering="true"runat="server"/>

<atlas:UpdatePanelID="UpdatePanel1"Mode="Conditional"runat="server"><ContentTemplate><asp:ButtonID="btnImport"runat="server"Text="Import"OnClick="btnImport_Click"/><divstyle="background-color:Lime"><h1><asp:LabelID="lblProgress"runat="server"Text=""></asp:Label></h1></div></ContentTemplate><Triggers><atlas:ControlValueTriggerControlID="lblProgress"PropertyName="Text"/></Triggers></atlas:UpdatePanel></form>

body>

html>

Deafault.aspx.cs

using

System;

using

System.Data;

using

System.Configuration;

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;

public

partialclass_Default : System.Web.UI.Page

{

protectedvoid Page_Load(object sender,EventArgs e)

{

}

protectedvoid btnImport_Click(object sender,EventArgs e)

{

lblProgress.Text =

"Starting Import...";

System.Threading.

Thread.Sleep(5000);

lblProgress.Text =

"That took awhile...";

}

I suspect any of two:

1) Call to button_Onclick is not asynchronous, so the page is waiting for the sub to finish

2) Setting lblProgress.Text from code does not trigger the trigger.. That would mean a bug in Atlas I guess

Wonder what you think...

Hi,

Atlas being asynchronous means that when you trigger an update for an UpdatePanel, a HTTP request is sent asynchronously to the web server, i.e. you can do other processing on client-side while the request you sent is being processed and the corresponding response is generated.

But the above response is generated when the partial postback ends, i.e. when the page has completed its whole lifecycle and rendered the HTML for the controls inside the UpdatePanel. This means that when btnImport_Click returns, the Label's text is set to "That took awhile..." and it's this text that will be displayed, since it is this text that it is rendered by the Label control and sent in the response from the server.

OK, sounds logical.How do I make the label to refresh in my long running process, which is executed after click?

I have also noticed that UpdatePanel has update property, but not sure how to use it...

Hi,

there are many approaches to monitor a long running task. The one I would take is to spawn a separate thread to run the task (btw checkthis article) and then poll the server at a specified interval to check the task's status and update a progress bar or other kind of progress indicator.

Without Atlas, this could be done using pure Javascript or a meta refresh. Adding Atlas would probably mean using a Timer control to just send the polling requests asynchronously, and update some controls (the progress indicators) inside an UpdatePanel.

Thanks, I was hoping that this could be done simpler using Atlas, if I could only somehow force the UpdatePanel to refresh itself once the lblProgress.text property is updated, my initial thought was that the trigger would do it, but than reading your post I realized that it is waiting for the btnImport_OnClick sub to finish...

Maybe if I need to have btnImport_OnClick running in seperate thread?

You said:

"...But the above response is generated when the partial postback ends, i.e. when the page has completed its whole lifecycle and rendered the HTML for the controls inside the UpdatePanel. This means that when btnImport_Click returns, the Label's text is set to "That took awhile..." and it's this text that will be displayed, since it is this text that it is rendered by the Label control and sent in the response from the server..."

Can I render page early in my onlick sub? before onclick sub will finish?How would I execute UpdatePanel partial postback once my onlick sub sets the lplProgress.text property?

Hi,

rfurdzik:

Can I render page early in my onlick sub? before onclick sub will finish?

no, because the rendering of a page is a stage in its lifecycle and you cannot modify the Page's lifecycle.

rfurdzik:

How would I execute UpdatePanel partial postback once my onlick sub sets the lplProgress.text property?

A partial postback is just a postback performed asynchronously (i.e. using XMLHTTP). From the Page's lifecycle point of view, a classic postback and a partial postback are pretty much the same thing: the Page goes through all its whole lifecycle, like in a "regular" postback. The difference is that only the HTML of the controls inside the UpdatePanels that are updating is injected into the response.

Also what is the porpouse of UpdatePanel1.Update(); ?

Does it force UpdatePanel to do partial postback?

I have also found this interesting article:http://forums.asp.net/thread/1338483.aspx

Seems that he found a way around to execute partial postback... Wonder how would it be possible to execute partial postback in my code:

protectedvoid btnImport_Click(object sender,EventArgs e)

{

lblProgress.Text =

"Starting Import...";

//Here I would like to execute partial postback of Updatepanel1. I have tried UpdatePanel.Update(), but it did not work

System.Threading.

Thread.Sleep(5000);

//THIS LAST MESSAGE IS ONLY SHOWN

lblProgress.Text =

"That took awhile...";

}

<<A partial postback is just a postback performed asynchronously (i.e. using XMLHTTP). From <<the Page's lifecycle point of view, a classic postback and a partial postback are pretty much <<the same thing: the Page goes through all its whole lifecycle, like in a "regular" postback. The <<difference is that only the HTML of the controls inside the UpdatePanels that are updating is <<injected into the response.

I think I understand now, so the page lifecycle will be finished when the last line of the OnClick sub is executed. Is this correct? In this case I guess I need:

1) to have Onclick to instantiate a seperate thread for long running task and leave the task running.. (what happens if the user closes the browser?)

2) My import class calls delegate method (part of my page, setup in import class constructor),how could I make that delegate method to update the lblProgress.text and execute partial postback?

Do you think that using webservice would make more sense?

After doing some research I realized that you were right,btnClick_ONClick sub is part of Postback, that is why postback request can not be generated within.

So now the question would be which aproach to use?

1) The one suggested by you btnClick_ONClick sub would create a seperate thread. Seems like it should be OK to execute Postback from a seperate thread process...

2) Create control in Atlas and have the control to call webservice. Seems like only the control can update progress label settings, server side code can not...

What would be the cons and prons of eighter aproach?

Instead of worrying about creating a new thread, you could separate the single request into 3 separate requests. The initial button click would cause the UpdatePanel to postback where you can change the text to 'loading', and use RegisterClientScriptBlock to inject javascript which would then initiate a second postback. The second postback would then perform your long operation, and would use RegisterClientScriptBlock to inject javascript to fire the final request which would be responsible for changing your text to 'finished' or whatever you decide.

Hope this helps,
-Tony

That is a great idea! I did not think about it. Would this technique allow the text to change several times during the Long Running Process? For example (1,2,3% etc..)

What is the exact injected java script/atlas code to fire the LRP sub? I do not know java script too much... Do you think that that javascript could call asynchronous web method, which would perform LRP and update the label's text? Will the web method have access to the Page object? Thanks,

Rafal

<< and then poll the server at a specified interval to check the task's status

Is not that waste of resources? I was thinking to have the LRP (Long Running Process) to call page's method (via delegate) and force the page to postback itself (partial postback).

What do you think?

trigger event doesnt fire when target control in show/hide panel

I have the following code with the basic required elements to produce the problem:

1<body>2<form id="form1" runat="server">3<asp:ScriptManager ID="ScriptManager1" runat="server" />4<div>5<asp:UpdatePanel ID="UpdatePanel1" runat="server">6<ContentTemplate>7<ajaxToolkit:PopupControlExtender ID="PopupExtender" runat="server" TargetControlID="lbTest"8Position="Right" PopupControlID="buttonPanel">9</ajaxToolkit:PopupControlExtender>10<asp:ListBox ID="lbTest" runat="server" Width="154px"></asp:ListBox>11</ContentTemplate>12<Triggers>13<asp:AsyncPostBackTrigger ControlID="btnAddItem" EventName="Click" />14</Triggers>15</asp:UpdatePanel>16<br />17<asp:Panel runat="server" ID="buttonPanel">18<asp:Button ID="btnAddItem" runat="server" OnClick="btnAddItem_Click" Text="Button" />19</asp:Panel>20</div>21</form>22</body>

The click event is never fired, though the postback occurs.

Any thoughts? Am I doing something "illegal" with the arrangement here? I have a whole form I want to show only in certain circumstances, the results of which should trigger the event to update the main page. How would I do this with Atlas if the given arrangement doesn't work?

TIA, Jeff.

Jeff,

This problem occurs because the PopupControlBehavior's _onClick method calls e.stopPropagation(). That prevents the WebForms.PageRequestManager._onFormElementClick method from getting called. That prevents the asynch postback information from being created correctly. That prevents the asynch postback from working properly.

I believe Ted added the problematic call a long time ago to improve the UI of the PopupControl. I've just pointed him to this thread for more info...

Saturday, March 24, 2012

Triggering partial update on text box losing focus

Hi,

I have a form on which I want a user to be able to enter a post code and, when the user tabs out of the field, triggers the population of a drop down list which contains the suburbs the postcode relates to, so the user can then select the suburb.

I have the drop down list in an Update Panel with partial rendering turned on but I can't figure out how to trigger it being refreshed when the control loses focus. I think I need to link it to the OnBlur event using javascript but I'm stuck at that point. Any ideas appreciated...

Thanks,

SimonOK, it was me being dippy. I didn't need to get clever and start hooking client side events, I just needed to set the Render property to "Always" and it fires whenever the text box loses focus.

Triggering TextChanged event

I'm trying to get a textbox to trigger it's textchanged event and post back via atlas - my code is as follows:

<atlas:ScriptManagerID="sm1"runat="server"EnablePartialRendering="true"/>

<atlas:UpdatePanelID="UpdatePanel1"runat="server">

<asp:TextBoxID="TextBox1"runat="server"OnTextChanged="TextBox1_TextChanged"></asp:TextBox>

</ContentTemplate>

<atlas:ControlEventTriggerControlId="TextBox1"EventName="TextChanged"/>

</Triggers>

</atlas:UpdatePanel>

It doesn't work! Is this something that should work? I've tried also doing it with a timer which does create a postback, but my textbox loses it's focus everytime.

I've tried looking for posts relating to this but the search functionality on these forums doesn't seem to allow you to restrict searches to specific forums any more.

I wonder if anyone else has tried this or has any suggestions?

Thanks

hello.

i might be wrong, but i think that the trigger should only be used to refresh a panel based on the change of a property or event of another control that is placed *outside* of the updatepanel. when i look at your code, i see that the textbox is inside of the panel. in this case, i think that you only need to set up the textchanged event (btw, don't forget to set the autopostback prop of the textbox to true or the event won't fire!)

I've tried my code both with and without a trigger, and with the text box outside and inside of the update panel - none of these work - in all cases it expects the Return key to be pressed to trigger the postback.

Has anyone got any ideas what I'm doing wrong here, or is this functionality not present?

Think we need ScottGu to the rescue?

hello again.

have you set the autpostback property to true on the textbox? if you don't set that property you won't get an automatic postback when the value of the control is changed.

Yes, autopostback is set - but it only triggers when I press return. I'd hope if would trigger the textchanged event whenever a key was pressed in the text box and cause an Atlas postback.

Also I see on Scott's examples that he is able to directly reference a control that's inside the control template - I had to use FindControl to get to mine - any idea why this is?

I'd be grateful if someone could try this and see if I'm doing something wrong - here's my code:

<formid="form1"runat="server">

<atlas:ScriptManagerID="sm1"runat="server"EnablePartialRendering="true"/>

<asp:TextBoxID="TextBox1"runat="server"OnTextChanged="TextBox1_TextChanged"AutoPostBack="True"></asp:TextBox>

<atlas:UpdatePanelID="UpdatePanel1"runat="server">

<h1>

<asp:LabelID="Label1"Text="Waiting for first postback"runat="server"></asp:Label>

</h1>

</ContentTemplate>

</atlas:UpdatePanel>

</form>

hello again.

well, the textchanged event only fires when the textbox looses its focus. so, if you hit tab after changing the value of the textbox you should also get a postback.

regarding your second question about getting a control, can you give us more info on what you're trying to do?

thanks.

Wednesday, March 28, 2012

TreeView + UpdatePanel Problems

Treeview in Ajax.Net

Monday, March 26, 2012

Treeview Malfunction In Update panel

treeview, accordion and updatepanels ;)

Controls that Are Not Compatible with UpdatePanel Controls

Treeviw within an Accordion Pane

Trigger a ModalPopupExtender from LinkButton in a column on a GridviewRow

Trigger does not work

trigger event doesnt fire when target control in show/hide panel

Saturday, March 24, 2012

Triggering partial update on text box losing focus

Triggering TextChanged event

ajax timercontrols

Blog Archive

About Me