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?

Trigger a panel refresh from javascript/pure html control

Hi,

I have a pure HTML tree control, that is outside of an ajax UpdatePanel. I want to write a JS function that triggers a particular panel to refresh, *as if* I hit a submit button inside of the panel. I don't want to put the HTML tree control inside an Ajax panel, as it will loose it's state (it will return to a completely collapsed state).

Putting a button inside the panel, and then running the JSelement.click() event from my tree control works in IE, but Firefox submits the entire page(the submit event is not captured by the AJAX framework in FF in this case,apparently).

I have looked into the client reference documentation at http://ajax.asp.net/docs/ClientReference/Global/default.aspx, and it seems like there should be a way to trigger a postback/panel refresh, but I have not found a way.

The PageRequestManager does not help, since it only monitors existing page requests. I need to invoke a page request, and run something like

PageRequest.Invoke('MyUpdatePanel');

or

var ajaxpanel = document.getElementById('AjaxPanelClientID');
ajaxpanel.update();

A related suggestion:

It would be nice if the UpdatePanel supported client side triggers, not just server side triggers. Consider the following hypothetical code:

<ajax:UpdatePanel ID="ajxUpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<!-- CONTENT -->
</ContentTemplate>
<Triggers >
<ajax:AsyncPostBackTrigger ClientTriggerFunction="MyCustomTrigger" OnTrigger="MyCustomTrigger_ontrigger" />
</Triggers>
</ajax:UpdatePanel>

Then the system would automatically generate the JS function (with the appropriate .NET ajax framework calls that I don't need to know about), so I can call it anywhere on the page, from multiple HTML controls if needed.

<input type="button" value="MyHTMLButton" onclick="MyCustomTrigger('argstring');">

The system should enable a code-behind event handler where I can put my server side code:

protected void MyCustomTrigger_ontrigger(object sender, AjaxClientTriggerEventArgs e) {
//run some server side .NET code here
switch(e.ClientArgString){
...
}
}

You can trigger an asynchronous post back by invoking the __doPostBack function. Just pass in the ID of the control that's either inside an update panel or is marked as a trigger for one. Here's an example:

<asp:UpdatePanel ID="up" runat="server">
 <ContentTemplate>
 <asp:Button ID="myButton" runat="server" OnClick="myButton_Click" Text="Click me!" />
 <asp:Label ID="myLabel" runat="server" />
 </ContentTemplate>
</asp:UpdatePanel>
<input id="myOtherButton" type="button" value="No, click me!" />
<script type="text/javascript">
 function pageLoad() {
 $addHandler($get('myOtherButton'), 'click', triggerAsyncPostBack);
 }
 function triggerAsyncPostBack(e) {
 __doPostBack('<%= myButton.UniqueID%>', '');
 }
</script>

One thing to watch out for is that the first parameter to __doPostBack needs to be the full ID of the control. If you're using master pages, your control IDs will be longer than they appear. Use the UniqueID property to get the full ID or the event handlers for your control won't run on the server.

Also, if you have event validation turned on (the default), you'll get an exception if you don't pass in a correct event argument as the second parameter to __doPostBack. For button controls, it should be the empty string. For other controls, it might be different, but you'll have to experiment to find out.

Hope this helps.

Thank you Jason,

That is the behaviour I was looking for, and it works in Firefox as well as IE. I knew about the _doPostBack function in general, but I did not know the syntax to call it.

Where is the best place to find documentation and syntax for the built-in ASP.NET and AJAX JS functions and calls? For example, I did not know about $get or $addHandler functions.

(I am familiar with similar functions from the prototype.js library).

Thanks again :-)

Another related discovery that is slightly more elegant (I am probably repeating what some already know...but I think its great :-)

Is is not necessary to use a button to trigger the post back inside the panel. I updated a hidden input field with a value, and then submitted thehidden field iteself with __doPostBack, and it worked great. I needed a hidden field to pass in a unique ID anyway, so the panel would know how to refresh itself.

Inside the UpdatePanel:

<input id="txtGroupID" type="hidden" runat="server" onserverchange="txtGroupID_ServerChange" />

JS code:

txt = $get("<%=this.txtGroupID.ClientID %>");
txt.value = somevalue;
__doPostBack("<%=this.txtMatGroupID.UniqueID %>","");

Douglas Smith:

Where is the best place to find documentation and syntax for the built-in ASP.NET and AJAX JS functions and calls? For example, I did not know about $get or $addHandler functions.

The ASP.NET AJAX documentation does document all of these functions. You'd have to know where to look, though. All of the $-prefixed functions seem to be documented in the Sys.UI namespace here:

http://ajax.asp.net/docs/ClientReference/Sys.UI/default.aspx

Browsing through the source code helps find the undocumented stuff.

That will trigger an asynchronous post back, but no event will be raised on the server with that control as the target. You probably want to execute some code to modify the controls inside the update panel or there'd be little point in triggering the asynchronous post back. That's why I used a button control in the example I gave you. If all you want to do is trigger the asynchronous post back and don't care about raising a specific event on the server, you could use the ID of the update panel control as the event target. To me, that would be stating the intention of what you're trying to do a little clearer.

If you don't want to use a button but do want to raise an event on the server, you can use any control that implements IPostBackEventHandler as the event target. Those controls have a RaisePostBackEvent method that gets invoked when a post back is received with their ID as the event target. For button controls, they raise their Click event in that method. That's where your code gets to do its stuff. You could easily create an "empty" custom control that didn't render anything, but could be used as the event target. (I tried using the page control for this, but there's code that prevents you from registering the page as an asynchronous post back trigger.)

It'd be nice if the UpdatePanel control itself implemented IPostBackEventHandler and raised some sort of custom event on the server that let you do this without having to write much custom code. You could simulate this a bit by putting some code inside one of the event handlers on your page and checking to see if the ScriptManager control's AsyncPostBackSourceElementID is the ID of the UpdatePanel control you used as the event target. If so, execute your custom code.

Hope this helps.

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 Animation

Like most of the ToolkitExtensions the AnimationExtension is connected to a TargetId, mostly a button.
But how could I trigger an animation in my codebehind. Say I check the text in a TextBox. How could I then start the animation. I triedRegisterStartupScript, but I can't get it right.

protectedvoid Button1_Click(object sender,EventArgs e)
{
if (TextBox1.Text == "")
{
//Show my animation
}
}

Seconded!!

Yes, god please, someone tell me how this is done.

Alternatively, tell us how to get the IDs of server controls into ConditionScript.

Hi Marinus/Mattias,

I think the best thing to do, as Mattias suggests, is to use theConditionAnimation. This will let you decide whether or not to play the animation by running a little bit of JavaScript. Assuming yourTextBox has anID="TextBox1" (and isn't in anaming container - but if it is, then itsClientID, which is the munged ID of your server control when written to the client, will look something likectl00_MyPanel1_TextBox1), you could define your animation as:
.
.
.
<Animations>
<OnClick>
<%-- Compared TextBox1.value to 2 single quote signs, not a double quote, to see if it's empty --%>
<Condition ConditionScript="$('TextBox1').value == ''">
.
. <%-- Original animation markup here --%>
.
</Condition>
</OnClick>
</Animations>
.
.
.

If you really do want to invoke the animation from the server, then you could emit code server side to interact with the Toolkit (as discussed inthis post) that will play the animation (as discussedhere - and each animation, likeOnClick,OnMouseOver, etc., has it's own function you can call to invoke it). If this doesn't answer your question, please keep posting.

Thanks,
Ted

Thanks for your answer Ted, I will read the posts and try it out.

Ted,
In the post about the ModalPopupExtender you wrote:
"Again, we're looking at making this a LOT easier with updates in our next release."
And yes, in the next release of the toolkit it was much easier. Now you just could write in your code behind:

ModalPopupProperties popup = MyModalExtender.GetTargetProperties(Target);
popup.Show();

Great!
Does the AnimationExtender has something alike?

Hi Marinus,

TheAnimationExtender doesn't have support for playing animations from the server (mostly because they're meant to be triggered from the client and it's a little weird to suggest that while the page was posting back your mouse hovered over a certain control). Another route you might look into iscreating the OnLoad animation on the server because that will automatically play once you post back.

Thanks,
Ted

Hi Ted,

I'm not 100% sure I understand your answer. Will the code below work if the TextBox is in a naming container (and therefore has that long munged ClientID) or not? If not, how do I make it work, because TextBoxes are almost always in naming containers in any reasonably complex application. I havent figured out how the heck to get the ClientID into theConditionScriptattribute of theConditiontag.

/Mattias

Ted Glaza [MSFT]:

Hi Marinus/Mattias,

I think the best thing to do, as Mattias suggests, is to use theConditionAnimation. This will let you decide whether or not to play the animation by running a little bit of JavaScript. Assuming yourTextBox has anID="TextBox1" (and isn't in anaming container - but if it is, then itsClientID, which is the munged ID of your server control when written to the client, will look something likectl00_MyPanel1_TextBox1), you could define your animation as:
.
.
.
<Animations>
<OnClick>
<%-- Compared TextBox1.value to 2 single quote signs, not a double quote, to see if it's empty --%>
<Condition ConditionScript="$('TextBox1').value == ''">
.
. <%-- Original animation markup here --%>
.
</Condition>
</OnClick>
</Animations>
.
.
.

If you really do want to invoke the animation from the server, then you could emit code server side to interact with the Toolkit (as discussed inthis post) that will play the animation (as discussedhere - and each animation, likeOnClick,OnMouseOver, etc., has it's own function you can call to invoke it). If this doesn't answer your question, please keep posting.

Thanks,
Ted

Hi Mattias,

No, the code example you were quoting wouldn't work if you had aTextBox in anINamingContainer. We'd like to make some improvements for scenarios like this in the future, but for now there is a workaround available. You can programatically modify the animations on the server like this:

<%@. Page Language="C#" %>
<%@. Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
 protected override void OnLoad(EventArgs e)
 {
 base.OnLoad(e);
 // Set the ConditionScript property of the OnClick Animation
 MyAnimations.OnClick.Properties["ConditionScript"] = string.Format("( $('{0}').value == '' )", txtName.ClientID);
 // Set the AnimationTarget property of the OnClick Animation's first child
 MyAnimations.OnClick.Children[0].Properties["AnimationTarget"] = txtName.ClientID;
 }
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server"><title>Test Page</title></head>
<body><form runat="server"><div>
 <atlas:ScriptManager id="ScriptManager" runat="server" />
 Name: <asp:TextBox ID="txtName" runat="server" /><br />
 <asp:Button ID="btnValidate" runat="server" Text="Animate If Empty" OnClientClick="return false;" /
 <atlasToolkit:AnimationExtender ID="MyExtender" runat="server">
 <atlasToolkit:AnimationProperties ID="MyAnimations" TargetControlID="btnValidate">
 <Animations>
 <OnClick>
 <Condition ConditionScript="/* To be filled in by the server - we'll default to false */ false">
 <Color Duration="1" StartValue="#FFFFFF" EndValue="#FF0000"
 Property="style" PropertyKey="backgroundColor" />
 </Condition>
 </OnClick>
 </Animations>
 </atlasToolkit:AnimationProperties>
 </atlasToolkit:AnimationExtender>
</div></form></body>
</html>

Thanks,
Ted

Trigger an update to UpdatePanel using javascript

Is it possible to trigger an update to UpdatePanel using javascript?

Thanks

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

Trigger control outside the updatepanel

Hello,

I need that the control typed in the "ControlID" property of a trigger, to be outside of the updatepanel.

If I put the button inside of the updatepanel, atlas works correctly.

But if I put the button outside of the updatepanel, the button_Click event is doing a complete postback of the entire page.

I want to put the button outside, because i don't want to load the same button one more time, just want to refresh the updatepanel when this button is clicked.

I hope you can understand. You can note my english is not very well.

Thanks!

You can make the button_Click handler call the UpdatePanelName.Update() function to make a partial postback on updatepanel UpdatePanelName. I hope this helps!
I had a similar requirement and used updatepanels inside a main updatepanel.

Thanks for your answers.

I've tried the UpdatePanel.Update() method, but still refreshing the entire page.

I've tried too somethinglike this:

<cc1:UpdatePanel ID="PanelFotoGrande" runat="server" Mode="Conditional"><ContentTemplate> ...Big Foto...</ContentTemplate><Triggers> <cc1:ControlEventTrigger ControlID="rptMiniaturas" EventName="ItemCommand" /></Triggers></cc1:UpdatePanel><cc1:UpdatePanel ID="PanelMiniaturas" runat="server" Mode="Conditional"><ContentTemplate> ...Thumbnails...</ContentTemplate></cc1:UpdatePanel>

With the same result. Finally, i've tried to group the two update panels inside other one. But still updating both updatepanels.

Maybe i have to disable the autopostbak fired by the button?? I don't know how..

Thanks a lot.

Trigger Collapsible Panel Using Javascript

Hi!

Is there a way to trigger expand / collapse on a collapsible panel using javascript? And yes, it must be triggered using javascript instead of server side.

I looked everywhere, but couldn't find any answer. Please help!!

Check outthispost.

Trigger DynamicPopulate on page load

I currently have a page that takes a very long time to load. What I want is for the page to load up content-less (just the master page), and then have a UpdatePanel load the actual content dynamically instead of having a 3/4 second load time.

I've tried hiding the UpdatePanel and using a DynamicPopulate extender to set the UpdatePanel to visible, but I can't find a way to trigger the DynamicPopulate extender after the page load.

Has anyone got any ideas how I can do this?

Thanks,
Weiran.

weiranz:

What I want is for the page to load up content-less (just the master page), and then have a UpdatePanel load the actual content dynamically instead of having a 3/4 second load time.

We recently published two videos that address this very question.

How Do I: Implement the AJAX Incremental Page Display Pattern?

How Do I: Implement the Incremental Page Display Pattern using HTTP GET and POST?

Each video provides sample code in C# and Visual Basic. So you should be able to watch the videos, download the code, and achieve your goal of having the page dynamically load content.

I do have a followup questions on these examples:

Both examples use either a web service or a get/post to retrieve plain html which is filled into a div section. So the content is, even though dynamically populated, static. How would I trigger a dynamic populate of an update panel on page load? My scenario is the following:

I have a page that contains a search box with a button and a GridView in an UpdatePanel. The typical usage is that the user enters something in the textbox and clicks search, then the query will be executed and the updatepanel refreshed with the filled GridView, showing a progress indicator while working. This works very well...
Now I want to link to this particular page and pass in a search term via the querystring. Easy enough, in OnPageLoad I pickup the term(s) from the query string, execute the query and directly show the page with the filled GridView. This works, but may be bad if the query takes along time, the page will not show until the result is available. What I would like to do is to show the page and on page load doing a postback with the parameters passed in from the querystring.

Is there an easy way to kick off such a pseudo postback that does not trigger a full postback on page load?

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

or

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 design-time error

At the begin, is all ok: when I open my project the controls was showed normally.
After first run, when I switch from html view to design-view the updatepanel control show this error:

Error Creating Control - Content1
'Triggers' could not be initialized. Details: 'Triggers' could not be added to the collection. Details: Object does not match target type.

This is my code:

<%

@dotnet.itags.org.PageLanguage="VB"MasterPageFile="~/MasterPage.master"AutoEventWireup="false"CodeFile="Ricerche.aspx.vb"Inherits="Ricerche"title="Ricerche" %>
<asp:ContentID="Content1"ContentPlaceHolderID="ContentPlaceHolder1"runat="Server">
<atlas:ScriptManagerID="ScriptManager1"runat="server"EnablePartialRendering="true"EnableScriptGlobalization="false"></atlas:ScriptManager>
<asp:TextBoxID="TxtSearch"runat="server"></asp:TextBox>
<asp:ImageButtonID="ImageButton1"runat="server"ImageUrl="~/Images/Cerca.gif"/><br/><atlas:UpdatePanelID="UpdatePanel1"runat="server"Mode="Conditional">
<ContentTemplate>
<asp:GridViewID="GridView1"runat="server"AutoGenerateColumns="True"DataKeyNames="ID"></asp:GridView>
</ContentTemplate>
<Triggers>
<atlas:ControlEventTriggerControlID="ImageButton1"EventName="Click"/>
</Triggers>
</atlas:UpdatePanel>
</asp:Content>

I must say that I use April CTP of Atlas and Atlas controlToolkit too.
Now i try to delete triggers section and change update panel mode to always, and the page was displayed correctly. But if I insert again triggers section the error come back.
What I can do? thanks

I also just started getting the same design time error ..

Error Creating Control - Content1
'Triggers' could not be initialized. Details: 'Triggers' could not be added to the collection. Details: Object does not match target type.

And in my specific case, I have:

And .. I've been using pages that have a very similar setup for like 2 weeks without problems like this.
Then today, I started getting the 'Error Creating Control' message when I went from Source view of the asp page to the Design view.

<asp:Content id="content1"> <atlas:UpdatePanel id="updatePanel1" runat="server" mode="Conditional"> <ContentTemplate> ... <asp:GridView ... /> ... </ContentTemplate> <Triggers> <atlas:ControlEventTrigger ControlID="button1" EventName="Click" /> <atlas:ControlValueTrigger ControlID="ddl1" PropertyName="SelectedValue" /> </Triggers> </atlas:UpdatePanel> ... <asp:Button id="button1" runat="server" Text="Huh?"> ... <asp:DropDownList id="ddl1" runat="server" /> ...</asp:Content>

Need assistance with this problem .. thanks!
Hmm .. interesting, so .. I open up the project this morning. The problem I was having yesterday isn't occurring anymore. Not much has changed from yesterday to today, other than I've added more content to the page.
I believe this is a bug with the IDE not handeling the trigger well in design mode. I have had this exact same problem and fix it by restarting VS 2005.

For some reason, the error went away for me when I hit "Save"...

if that's any help

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

Trigger for Update Panel with Multiple Content Sections on Master Page

Can I use an UpdatePanel in one Content section on a content page with a trigger in another Content section of the same content page?

I have a master page with multiple ContentPlaceHolders which I am using as the template for various pages with a search section and a results section. The search section is contained in one ContentPlaceHolder and the results is contained in another. The content page search section contains an ASP.NET button control (id="btnSubmit") and the content page results section contains an Atlas UpdatePanel containing a Trigger which I would like to tie to btnSubmit. I have tried declaratively to make btnSubmit the trigger, as well as programmatically. When the page loads, I get a "ControlID of trigger must reference valid control" error either way. I have tried substituting btnSubmit.ClientID.ToString inside the trigger definition and this does not work either.

I have another master page/content page combination where both the trigger and the update panel are in the same ContentPlaceHolder/Content section, and I have no problem getting Atlas to work. I am using the April CTP of Atlas.I made a similiar post... I hope I will get a replyhttp://forums.asp.net/1450493/ShowThread.aspx#1450493 from here

trigger for control that is dynamically created on databind

I have a dropdownlist that is created when the gridview is databound. This is because the dropdownlist is contained in the headertemplate of a templatefield column. So I have tried to add the trigger dynamically right after the gridview is databound, but I keep getting an error saying that the controlID wasn't found...I don't know what is wrong. I can find the control inside the the gridview with no problem using the findControl fuction.

 TimeStampGridView.DataBind();
 DropDownList StatusFilterDLL=(DropDownList)TimeStampGridView.HeaderRow.Cells[2].FindControl("StatusFilter");//finds the Control
 StatusFilterDLL.SelectedIndex = StatusFilterDLL.Items.IndexOf(StatusFilterDLL.Items.FindByText(StatusFilter));//Works fine
 AsyncPostBackTrigger trigger =new AsyncPostBackTrigger();
 trigger.ControlID ="StatusFilter";
 trigger.EventName ="SelectedIndexChanged";
 GridUpdatePanel.Triggers.Add(trigger);//error:A control with ID 'StatusFilter' could not be found for the trigger in UpdatePanel 'GridUpdatePanel'

Anyone know what I'm doing wrong here?

Thanks for the help in advance!

I removed all the code for the dynamic trigger and set the dropdownlist's autopostback= true so now when the user changes the selectedindex the gridview is updated

Trigger Hack... make any control a trigger for your update panel.

I ran into a problem where I got the error message"A control with ID 'foo' could not be found for the trigger in UpdatePanel bar'."

Basically, I have an update panel with a FormView in it, and in the FormView's EditItem template, I have another UpdatePanel with a Wizard in it. I want the UpdatePanel with the Wizard to trigger on certain Wizard events (like NextButtonClick, PreviousButtonClick), but when the page loads, I get the common error message above.

The long story is, I could just set ChildrenAsTriggers=True for the panel with the wizard, but the different wizard steps have their own UpdatePanels, and I don't want to redraw the whole wizard because someone clicked a radio button, for example... So I decided to fix the problem.

Basically, I wrote a simple control that has an event (UpdateTrigger). It has a single public function to fire that trigger (FireUpdateTrigger). Simple, huh?

So Now I can drop the control on the page right after the UpdatePanel (same nesting level), to be sure that the UpdatePanel can find it. Then, in my Wizard markup, I just add some properties like OnNextButtonClick="WizardEvent" OnPreviousButtonClick="WizardEvent" etc. In the code behind, the WizardEvent trigger simply calls the helper control's FireUpdateTrigger method, which causes the panel to update... like I said, simple.

Here's the code (pretty complex):

using System.ComponentModel;using System;using System.Web.UI;namespace MMCS.WebControls{ [ToolboxData("<{0}:UpdateTriggerHelper runat=server></{0}:UpdateTriggerHelper>")]public class UpdateTriggerHelper : Control, INamingContainer {private static readonly object EventUpdateTrigger =new object(); [Category("Action")] [Browsable(true)] [Bindable(false)] [DefaultValue(null)] [PersistenceMode(PersistenceMode.Attribute)]public event EventHandler UpdateTrigger { add { Events.AddHandler(EventUpdateTrigger,value); } remove { Events.RemoveHandler(EventUpdateTrigger,value); } }public void FireUpdateTrigger() { EventHandler handler = Events[EventUpdateTrigger]as EventHandler;if (handler !=null) { handler(this, EventArgs.Empty); } } }}

Hi,valenumr

Make sure if the following sample can help you:

<%@. Page Language="C#" %>

<%@. 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">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<link href="http://links.10026.com/?link=StyleSheet.css" mce_href="StyleSheet.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
var styleToSelect;
function onOk() {
$get('Paragraph1').className = styleToSelect;
}
</script>

</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<p id="Paragraph1">
GetContentFillerTextGetContentFillerTextGetContentFillerTextGetContentFillerText</p>
<br />
<ajaxToolkit:Accordion ID="Accordion1" runat="server" ContentCssClass="grey" FadeTransitions="false"
FramesPerSecond="25" TransitionDuration="250" HeaderCssClass="dimgreen" EnableViewState="true">
<Panes>
<ajaxToolkit:AccordionPane runat="server" ID="PaneOne">
<Header>
AccordionPane0
</Header>
<Content>
<a href="http://links.10026.com/?link=javascript:return false" onclick="javascript: LinkButton1.click()">Click here to change
the paragraph style</a>
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>
<div style="visibility: hidden">
<asp:LinkButton ID="LinkButton1" runat="server" Text="Click here to change the paragraph style" /></div>
<asp:Panel ID="Panel1" runat="server" Style="display: none" CssClass="modalPopup">
<asp:Panel ID="Panel3" runat="server" Style="cursor: move; background-color: #DDDDDD;
border: solid 1px Gray; color: Black">
<div>
<p>
Choose the paragraph style you would like:</p>
</div>
</asp:Panel>
<div>
<p>
<input type="radio" name="Radio" id="RadioA" checked="checked" onclick="styleToSelect = 'sampleStyleA';" />
<label for="RadioA" class="sampleStyleA" style="padding: 3px;">
Sample paragraph text</label>
</p>
<p>
<input type="radio" name="Radio" id="RadioB" onclick="styleToSelect = 'sampleStyleB';" />
<label for="RadioB" class="sampleStyleB" style="padding: 3px;">
Sample paragraph text</label>
</p>
<p>
<input type="radio" name="Radio" id="RadioC" onclick="styleToSelect = 'sampleStyleC';" />
<label for="RadioC" class="sampleStyleC" style="padding: 3px;">
Sample paragraph text</label>
</p>
<p>
<input type="radio" name="Radio" id="RadioD" onclick="styleToSelect = 'sampleStyleD';" />
<label for="RadioD" class="sampleStyleD" style="padding: 3px;">
Sample paragraph text</label>
</p>
<p style="text-align: center;">
<asp:Button ID="OkButton" runat="server" Text="OK" />
<asp:Button ID="CancelButton" runat="server" Text="Cancel" />
</p>
</div>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server"TargetControlID="LinkButton1"
PopupControlID="Panel1" BackgroundCssClass="modalBackground" OkControlID="OkButton"
OnOkScript="onOk()" CancelControlID="CancelButton" DropShadow="true" PopupDragHandleControlID="Panel3" />
</div>
</form>
</body>
</html>

Now you don't get errors like link button with the following name could not be found. :)

Hope this helps,

Let me know if you need more info.

Trigger full postback from the server during a partial postback.

Well, I have a dialog user control (ajax popup) which can again contain other user asp user controls as content. The content of the dialog is created inside an UpdatePanel, so that the dialog content can postback. All of that works OK.

On the web page I have now some information visible inside a GridView which is not in an UpdatePanel and should not be, because I need the browser forward/backward button to work. A link on that web page lets one of these dialog controls pop up. The dialog contains a user control which can manipulate the data which is visible inside the GridView. If the user presses a button inside the dialog, the dialog does an asynchronous postback as the user control/dialog content is inside an update panel and the dialog closes. That gives the user the impression that nothing happened as the data visible in the GridView did not change. I do already have the code to refresh the gridview, but how can I change the behavior during the postback from being an asynchronous postback to a full postback?

So just to clarify some pseudo code:

In the user control contained inside the dialog I would have some code like:

void OnOK(...)
{
// check if any data changed
if (textBox.Text != record.Text)
{
// do a database update
// and
// update cached data which the datagrid is bound to
// call a method on the page to rebind the datagrid only

// ? Force a full page refresh
}
else
{
// do nothing
// asynchronous postback is OK, no full page refresh needed
}
}

The force of a full page refresh is what I would need. In a fat environment like Windows Forms, I would just call Invalidate on the Form. Or IF the DataGrid would be inside an UpdatePanel I would search for it and call Update() on it, but then I would loose the browser caching during back and forward movements. So I was searching through all of the classes if there is something like ScriptManager.UpdatePage or something similar, but have found nothing so far.

So what is the solution here? How can inform the ajax client side script, that it should just go ahead and rerender the whole page instead of just extracting the update panel portions?

Thanks

In the <Triggers> collection of your updatepanel, just add whatever control you want to cause a full refresh as a PostBackTrigger instead of as a AsynchPostBackTrigger.

<asp:UpdatePanel ...>
<Triggers>
<asp:PostBackTrigger ControlID="whateverID" />
</Triggers>
<ContentTemplate>
...
</ContentTemplate>
</asp:UpdatePanel>

Well, that does not work:

a) the UserControl is designed separatly and does not have an update panel and vice versa the dialog is a generic control which just adds a UserControl as a content, so it cannot hardcode if there is any control ID inside which should trigger a full postback

b) I do not want a full postback to occur all the time when the button is pressed, the logic of the button on the server side should determine if a full postback is necessary or not, if not then a partial postback is OK.

I tried to work around now, kind of using your approach by doing this in the OnPreRender or OnChildControlsCreated of the UserControl:

System.Web.UI.WebControls.WebControl btnOK =this.Parent.Parent.FindControl("btnOK")as System.Web.UI.WebControls.WebControl;
if (btnOK !=null)
{
System.Web.UI.Control control = btnOK;
UpdatePanel updatePanel = control.ParentasUpdatePanel;
while ((updatePanel ==null) && (control !=null))
{
control = control.Parent;
updatePanel = controlasUpdatePanel;
}
if (updatePanel !=null)
{
PostBackTrigger pbTrigger =newPostBackTrigger();
pbTrigger.ControlID ="btnOK";
updatePanel.Triggers.Add(pbTrigger);
}
}

So I do find the OK button and I do find the UpdatePanel that contains the button, but it has no effect whatsoever.
The control ID must be right, otherwise I would not be able to find the button with it, but still no PostBack and the Dialog itself is not inside an UpdatePanel.

trigger is causing the user controls OnInit to fire

I have a TextBox inside an UserControl which triggers an update panel on TextChanged. Works really well, but I noticed a problem. When AJAX makes the call back to the server to execute the TextChanged event, it is actually firing the UserControl's overridden OnInit beforehand. Is this normal behavior? I would think that for a page, OnInit should only get called once - when the page is created. There is a good deal of initialization code in my OnInit that really should not be executed again if it does not have to. Is there a way to make the UpdatePanel trigger not fire OnInit?

AJAX postbacks are executed at the server like normal postbacks (the entire page lifecycle is processed from the beginning), so Page.IsPostback = True for AJAX postbacks.

Trigger inside user control wont work

My Page contains a DataGrid inside UpdatePanel and a Filter user control.
I want to set a trigger to the UpdatePanel which refer to a button inside the Filter user control.

I get this error:
A control with ID 'Filter1_btnGo1' could not be found for the trigger in UpdatePanel 'UpdatePanel'.

how do I make this work?

Have you tried:

UpdatePanel.FindControl()

You pass in the control ID.

If you still have a problem, supply some sample code and I'll have another look.

Here is a small and simple code example to show the problem, have a look ...

1. TestUpdatePanel.aspx

<%@. Page Language="C#" AutoEventWireup="true" CodeBehind="TestUpdatePanel.aspx.cs" Inherits="Test.TestUpdatePanel" %>
<%@. Register TagPrefix="UC" TagName="OutSideTrigger" src="http://pics.10026.com/?src=MyUserControl.ascx" %>

<script runat="server">

protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "Refreshed at " +
DateTime.Now.ToString();
}
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>UpdatePanel Tutorial</title>
<style type="text/css">
#UpdatePanel1 {
width:300px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<fieldset>
<legend>UpdatePanel</legend>
<asp:Label ID="Label1" runat="server" Text="Panel created."></asp:Label><br />
</fieldset>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btn1" />
<asp:AsyncPostBackTrigger ControlID="uc1_UCButton" />
</Triggers>
</asp:UpdatePanel>
<asp:Button ID="btn1" runat="server" OnClick="Button1_Click" Text="Button" /></div>
<UC:OutSideTrigger id="uc1" runat="server"></UC:OutSideTrigger>

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

2. MyUserControl.ascx

<%@. Control Language="C#" AutoEventWireup="true" CodeBehind="MyUserControl.ascx.cs" Inherits="Test.MyUserControl" %>

<div style="height:50;width:400;background-color=yellow">
<asp:Button ID="UCButton" runat="server" Text="Button should triger the update panel." />
</div>

Trigger not working for Linkbutton in GridView

I have a linkbutton I'm trying to add a trigger two for two update panels on my aspx page.

I have this but the update panels are not updating... any recommendations?

protected void GridView_ChangeSearchResults_RowDataBound(object sender, GridViewRowEventArgs e) {if (e.Row.RowType == DataControlRowType.DataRow) { LinkButton lb = (LinkButton)e.Row.FindControl("Linkbtn_StaffChangeNew"); AsyncPostBackTrigger trigger =new AsyncPostBackTrigger(); trigger.ControlID = lb.UniqueID.ToString(); trigger.EventName ="Command"; UpdatePanel_Header.Triggers.Add(trigger); UpdatePanel_Info.Triggers.Add(trigger); } }

It doesn't bomb out on me and I've put in a breakpoint and is seems to be adding the triggers but they don't fire for some reason. When I add the triggers in from the GUI I'm using the onlcick event for other button controls on the page.

For this action I am using a command event. I've tried changing the EventName to both Click and Command and neither seem to work. Here is the method for the command event.

protected void ChangeStaffFromGrid(object sender, CommandEventArgs e) {int userStaffID = Convert.ToInt32(bmsUser.CmsStaffID);string budgetyear = Convert.ToString(budgetYear.UserSelectedFiscalYear);

int profileID = Convert.ToInt32(Session["staffProfileID"]);int newProfileID = 0;int newStaffID = Convert.ToInt32(e.CommandArgument);//sets the new staff ID from the selection. Hashtable changeStaffHash =new Hashtable(); changeStaffHash = BmsDLL.ChangeStaff(profileID, newStaffID, userStaffID); newProfileID = Convert.ToInt32(changeStaffHash["newStaffProfileID"]); SetUserSessions("change", newProfileID); SetHeaderInfo(Convert.ToInt32(Session["staffProfileID"])); SetNewProfileIDItems(Convert.ToInt32(Session["staffProfileID"])); }

The two methods that update the two pannels are SetHeaderInfo and SetUserSessions.

Thanks for your help.

Use ScriptManager1.RegisterAsyncPostBackControl(YourLinkButton) instead of creating AsyncTrigger. then in the button command event update your update panels by calling the update.

I've just recenlty started using Ajax in my app, do you have a code example of your suggestion?

Which even would I add ScriptManager1.RegisterAsyncPostBackControl(YourLinkButton) ? In the rowdatabound event?

Try the following code:

protected void GridView_ChangeSearchResults_RowDataBound(object sender, GridViewRowEventArgs e){if (e.Row.RowType == DataControlRowType.DataRow) { LinkButton lb = (LinkButton)e.Row.FindControl("Linkbtn_StaffChangeNew");ScriptManager1.RegisterAsyncPostBackControl(lb);// Assuming the ScriptManager name in your page is ScriptManager1 }}

That didn't work. The same updates to the panels are working with regular buttons. This makes no sense.

Hi,

As far as I know,You can add anUpdatePanel control programmatically, but you cannot add triggers programmatically. To create trigger-like behavior, you can register a control on the page as an asynchronous postback control. You do this by calling theRegisterAsyncPostBackControl(Control) method of theScriptManager control. You can then create an event handler that runs in response to the asynchronous postback, and in the handler, call theUpdate() method of theUpdatePanel control.

For more information,seehttp://www.asp.net/AJAX/Documentation/Live/mref/T_System_Web_UI_UpdatePanel.aspx

IfRegisterAsyncPostBackControl(Control) method & Update() method doesn't work, there must be something wrong in your code.You can post some code so we can check out where is the error.

Best Regards

It seems the Update() method is working for me. Thanks for your help.

Trigger ModalPopupExtender from LoadPage Event instead of Control

Is it possible to have the modal dialog appear when a page is first loaded? It appears that it only works from a control (TargetControlID) like a button.

Create a LinkButton that has style="display: none;" and make this the target control of the ModalPopup. Then call the server side Show() or the client side show() method to display the modal popup manually whenever you need to.

Trigger Modal Popup from clientside JavaScript

Hi!

How can I trigger a Modal Popup from client-side JavaScript, without having to have it triggered off of a LinkButton server control?

The modal popup demo on the Sample website shows how to show/hide the popup in script.

Would you believe I must have looked at that page dozens and dozens of times and never noticed that blurb down below?

I must admit that one of the problems is that the documentation on the page makes no reference to the BehaviorID property of the ModalPopupExtender... I only found it through extensive Googling...

That blurb was just added last week after we received more than a couple of requests for demo'ing how to programmatically show/hide modalpopups.

Regarding your question about BehaviorID, it is not ModalPopup specific but something that is part of the Toolkit ExtenderControlBase class so all the extenders in the Toolkit have it. You can find more information on that in theExtender Base Class features walkthrough on the Toolkit sample website.

Aaah! Whew! Now I don't feel so bad :)

And thanks for the pointer on the BehaviorID stuff... I think in my haste to see what the toolkit had to offer I didn't dig deep enough to find out about the extras. Just what I needed!