How do I trigger an UpdatePanel from the ItemCommand event of a data-bound Accordion?

Greetings, clever ASP.NET AJAX users.

I have a data-bound Accordion with a Button in each header. Cliking the button changes a label inside an UpdatePanel. But I don't want a full postback when the Button is clicked. I just want the UpdatePanel itself updated.

I have tried registering the ItemCommand event of the Accordion as a trigger, but I get this error message, which I don't understand:

Control with ID 'accAccordion' being registered through RegisterAsyncPostBackControl or RegisterPostBackControl must implement either INamingContainer, IPostBackDataHandler, or IPostBackEventHandler.

Here is my code:

 <asp:UpdatePanel ID="upUpdatePanel" runat="server" ChildrenAsTriggers="true" > <ContentTemplate> <div style="border:1px solid black;"> Name: <asp:Label ID="lblName" runat="server" /><br /> <asp:Button ID="btnChange" runat="server" OnClick="btnChange_Click" Text="Inside Update Panel"/> </div> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="accAccordion" EventName="ItemCommand" /> </Triggers> </asp:UpdatePanel> <br /> <ajaxtoolkit:Accordion ID="accAccordion" runat="server" RequireOpenedPane="false" OnItemDataBound="accAccordion_ItemDataBound" OnItemCommand="accAccordion_ItemCommand"> <HeaderTemplate> header: <asp:Button ID="btnChange" runat="server" CommandArgument="Inside Update Panel" /> </HeaderTemplate> <ContentTemplate> content:<br /> </ContentTemplate> </ajaxtoolkit:Accordion>

public partialclass _Test : System.Web.UI.Page{protected string[] aNames = {"foo","bar","baz" };protected void Page_Load(object sender, EventArgs e) {this.accAccordion.DataSource =this.aNames;this.accAccordion.DataBind(); }protected void btnChange_Click(Object sender, EventArgs e) {this.lblName.Text =this.btnChange.Text; }protected void accAccordion_ItemDataBound(Object sender, AjaxControlToolkit.AccordionItemEventArgs e) {if (e.AccordionItem.ItemType == AjaxControlToolkit.AccordionItemType.Header) { Button btnChange = (Button)e.AccordionItem.FindControl("btnChange"); btnChange.Text = e.AccordionItem.DataItem.ToString(); btnChange.CommandArgument = btnChange.Text; } }protected void accAccordion_ItemCommand(Object sender, CommandEventArgs e) {this.lblName.Text = e.CommandArgument.ToString(); }}

Obviously if I remove the trigger the error goes away, but then I don't get partial page rendering. I tried adding code to the ItemDataBound event of the Accordion to register the Button with the ScriptManager as an AsyncCallBack or whatever it is, and then added code to the ItemCommand event to call the Update() method of the UpdatePanel, but that doesn't work either -- I still get a full postback.

Any ideas?

If it's not feasible to trap the ItemCommand event of the Accordion or the Click event of the Button, is there a more exotic solution that would let me trigger the UpdatePanel from client script? I would need to be able to somehow pass the CommandArgument from the specific button that was clicked...

FYI, I worked around this problem using the approach described here:http://weblogs.asp.net/rajbk/archive/2007/01/21/refresh-updatepanel-via-javascript.aspx

I used SuppressHeaderPostBasks="true" on the Accordion, then for each Button in the Accordion Pane's header, I used the OnClientClick property to set the value of a hidden input element inside the update panel, then call the __doPostBack method pointing at that element. In the codebehind, I trapped the Change event of the hidden input element and did my processing.

I have an updatepanel inside an Accordion and I think you might have the solution for my problem, but I don't understand you process.

I would be grateful if you could help me.

Here's my code;

codebehind

protectedvoid Page_Init(object sender,EventArgs e)

{

Accordion1.FindControl("nothing");

LinkButton UserLink = Accordion1.FindControl("UserLink")asLinkButton;

ScriptManager.GetCurrent(this.Page).RegisterAsyncPostBackControl(UserLink);

//Creates a new async trigger

AsyncPostBackTrigger trigger =newAsyncPostBackTrigger();

//Sets the control that will trigger a post-back on the UpdatePanel

trigger.ControlID ="UserLink";

//Sets the event name of the control

trigger.EventName ="Click";

//Adds the trigger to the UpdatePanels' triggers collection

UpdatePanelUser.Triggers.Add(trigger);

}

protectedvoid Page_Load(object sender,EventArgs e)

{

}

protectedvoid UserLink_Click(object sender,EventArgs e)

{

//UpdatePanel getUserPanel = UserPanel.FindControl("UpdatePanelUser") as UpdatePanel;

//ScriptManager.GetCurrent(this.Page).RegisterAsyncPostBackControl(getUserPanel);

String userPanelPath ="~/CMS/_admin/_components/CMS_controls/admin_controls/UserPanel.ascx";Control userPanel = Page.LoadControl(userPanelPath);

PanelUser.Controls.Add(userPanel);

UpdatePanelUser.Update();

}

aspx

<ajaxToolkit:AccordionID="Accordion1"runat="server"HeaderSelectedCssClass="AdminPanelHeaderSelected"RequireOpenedPane="false"SuppressHeaderPostbacks="true"SelectedIndex="0"HeaderCssClass="AdminPanelHeader"ContentCssClass="AdminPanelContent"FadeTransitions="true"FramesPerSecond="40"TransitionDuration="250"AutoSize="none">

<Panes>

<ajaxToolkit:AccordionPanerunat="server"ID="Home">

<Header>

<ahref=""onclick="return false;">Home</a>

</Header>

<Content>

</Content>

</ajaxToolkit:AccordionPane>

<ajaxToolkit:AccordionPanerunat="server"ID="UserPanel">

<Header>

<asp:LinkButtonID="UserLink"runat="server"OnClick="UserLink_Click">User panel</asp:LinkButton>

</Header>

<Content>

<asp:UpdatePanelID="UpdatePanelUser"runat="server"UpdateMode="Conditional">

<ContentTemplate>

<asp:PanelID="PanelUser"runat="server">

</asp:Panel>

</ContentTemplate>

</asp:UpdatePanel>

</Content>

</ajaxToolkit:AccordionPane>

<ajaxToolkit:AccordionPanerunat="server"ID="STATS">

<Header>

<ahref=""onclick="return false;">Statistics</a>

</Header>

<Content>

</Content>

</ajaxToolkit:AccordionPane>

<ajaxToolkit:AccordionPanerunat="server"ID="GroupEmails">

<Header>

<ahref=""onclick="return false;">Group Email</a>

</Header>

<Content>

</Content>

</ajaxToolkit:AccordionPane>

<ajaxToolkit:AccordionPanerunat="server"ID="Errors">

<Header>

<ahref=""onclick="return false;">Error reporting</a>

</Header>

<Content>

</Content>

</ajaxToolkit:AccordionPane>

</Panes>

</ajaxToolkit:Accordion>

Thanks.

How do I trigger a script to run when a PopupControl gets hidden?

To put it another way: How do I trigger a script to run when a PopupControl gets hidden?

Seeing as the control toolkit handles all the event trapping and so on, I don't know what event to trap and how. Anyone know?

Hi,

the ModalPopup exposes an OnCancelScript property. You can set this property to the script that will be executed when the popup is dismissed.

Hmm ... if I was using a ModalPopup that would be a great tip, but I'm using a normal PopupControl. I've found a dirty trick - the animation property allows a javascript routine to be called when the popup closes. Initially I tried using a javascript _doPostBack to run a server-side routine, but I couldn't get that to work, so I did the whole thing client side instead. It may not be the prettiest way to do it, but hey, it works.

How do I manually trigger a nextpage for the data navigator?

So I'm already familiar with

http://atlas.asp.net/docs/util/srcview.aspx?path=~/atlas/samples/data/DataNavigator.src

and I can get it to work with buttons

but lets say we replaced those buttons with anchor tags instead?

oh wait I just figured it out. You don't do anything just chaging those elements to anchors and leaving them labeled as buttons in the XML markup causes the same behavior.. That's cool. why is that? My guess is because anchor and button both have the exact same onclick event which is the event that is raised.

OK well than for academic reasons how would I invoke a next page on a DataNavigator without a button like lets say from a hyperlink object or from javascript code?

I tried creating a datanavigator object in javascript code

var

pageNavigator =new Sys.UI.Data.DataNavigator($("pageNavigator"));

pageNavigator.initialize();

alert(pageNavigator.get_dataView());

pageNavigator.onBubbleEvent(

null,"nextpage");

but that didn't work at all.

All the DataNavigator control does is increment the pageIndex property on its associated DataView component. Knowing that, you can easily do the same thing:

var dataView = $object('dataView');
dataView.set_pageIndex(dataView.get_pageIndex() + 1);

Hope that helps.

--
Jason

How do I invoke a suitable event on the client?

I have two TextBoxes above a GridView. The GridView is wrapped in an UpdatePanel and both TextBoxes trigger an ajax GridView refresh OnTextChanged.

This is my problem. The user may sometimes leave nothing in a TextBox - when that happens I assume they mean zero, so I want to put the value of '0' back into the TextBox (which the user has removed, by deleting the entire content of the TextBox). See the javascript: restoreTextBox() function below. What event is available for me to do this and can I just invoke the event or do I need to inherit something. I have tried beginRequest() or pageLoaded() but nothing happens.

PS: The txtAssetPc_TextChanged() server-side method is working fine to update the GridView. I just want to know how I can use a suitable client event.

aspx Code only below (the server code is missing as it is not relevant to this problem).

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">
<Services>
<asp:ServiceReference Path="~/RedirectService.asmx" />
</Services>
</asp:ScriptManager>
<asp:ValidationSummary ID="vsFunds" runat="server" ValidationGroup="TextPC" DisplayMode="BulletList" ShowSummary="true" /><br />
Equities ≥<asp:TextBox ID="txtEquities" runat="server" Text="0" CssClass="text" MaxLength="3" ToolTip="Enter minimum percentage value of Equities (0 - 100)" OnTextChanged="txtAssetPc_TextChanged" AutoPostBack="true" />% <asp:RangeValidator ID="rvEquities" ControlToValidate="txtEquities" runat="server" ErrorMessage="Valid range for Equities is 0-100" Type="Integer" MinimumValue="0" MaximumValue="100" ValidationGroup="TextPC" /><br />
Fixed Income ≥<asp:TextBox ID="txtFixedIncome" runat="server" Text="0" CssClass="text" MaxLength="3" ToolTip="Enter minimum percentage value of Fixed Income (0 - 100)" OnTextChanged="txtAssetPc_TextChanged" AutoPostBack="true" />% <asp:RangeValidator ID="rvFixedIncome" ControlToValidate="txtFixedIncome" runat="server" ErrorMessage="Valid range for Fixed Income is 0-100" Type="Integer" MinimumValue="0" MaximumValue="100" ValidationGroup="TextPC" />

<asp:UpdatePanel ID="upAssetExposure" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="gvAssetExposure" runat="server" AutoGenerateColumns="False" DataKeyNames="PensionFundID"
AllowSorting="True" AllowPaging="True" PageSize="50"
OnRowDataBound="gvAssetExposure_RowDataBound" OnPageIndexChanging="gvAssetExposure_PageIndexChanging" OnSorting="gvAssetExposure_Sorting" >
<PagerSettings Mode="NumericFirstLast" />
<Columns>
<asp:BoundField HeaderStyle-CssClass="ResultsHeading" ItemStyle-CssClass="tdCol32" NullDisplayText="N/A" DataField="FundName" HeaderText="Investor" SortExpression="FundName" />
<asp:BoundField HeaderStyle-CssClass="ResultsHeading" ItemStyle-CssClass="tdCol12" NullDisplayText="N/A" DataField="TotalFundAssetsSterling" HeaderText="Total Fund Assets (GBP)" SortExpression="TotalFundAssetsSterling" DataFormatString="{0:GBP ###,### m; N/A}" HtmlEncode="False" />
<asp:BoundField HeaderStyle-CssClass="ResultsHeading" ItemStyle-CssClass="tdCol12" NullDisplayText="N/A" DataField="Equities_Percent" HeaderText="Equities (%)" SortExpression="Equities_Percent" DataFormatString="{0:##; N/A}" HtmlEncode="False" />
<asp:BoundField HeaderStyle-CssClass="ResultsHeading" ItemStyle-CssClass="tdCol12" NullDisplayText="N/A" DataField="FixedIncome_Percent" HeaderText="Fixed Income (%)" SortExpression="FixedIncome_Percent" DataFormatString="{0:##; N/A}" HtmlEncode="False" />
</Columns>
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="txtEquities" EventName="TextChanged" />
<asp:AsyncPostBackTrigger ControlID="txtFixedIncome" EventName="TextChanged" />
</Triggers>
</asp:UpdatePanel>

<script type="text/javascript">
var aTxt = ['<%txtEquities.ClientID%>','<%txtFixedIncome.ClientID%>'];
function restoreTextBox(){
for (var e=0; e < aTxt.length; e++){
var txtBox = document.getElementById(aTxt[e]);
if (txtBox.value == '')
txtBox.value = '0';
}
}
</script>

Just add onblur="restoreTextBox();" to your textboxes.

how can i use a textbox with an update panel during textchange

the case is, everytime the textbox will be change it will trigger a process wherin it will look for the data in the databse, after that it will display the data to a grid. the textbox & grid are place inside the update panel. It's just I only want that portion to be refreshed.

When an update panel posts the page back - your entire page is reloaded on the server. The client however only redraws the portions you've specified inside the update panel.

To accomplish this, and fire off the ontextchanged event you're looking for - set your textbox like this

<asp:textbox id="txtSearch" runat="server" autopostback="true" />

Now keep in mind, that this will only fire when the textbox looses focus.

how can i know which updatepanel in multiple updatepanels at BeginRequest event

hello ,

I have two updatepanels . updatepanel1 and updatepanel2 . updatepanel1 trigger when button1 click . And then updatepanel2 trigger when button2 click . I add one client side event like this

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequestHandler);

function beginRequestHandler(sender,args)

{

here . how can i know which updatepanel request ? because i want to do some when updatepanel2 request .

Please help me . show me with sample code .

Any post will be appreciated .

Thanks in advance.

kmhsad.

Why are you trying to track which updatepanel is updating when you can just handle the button that caused the update?

Hello ,

Thank you for your replied . i got idea . I am new for ASP.net . i didn't consider this idea before .

thank