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 Databind to a GridView inside an Accordion Pane

I am trying to DataBind the results of a query to a GridView Control inside an Accoridon Pane. I can get the data from the elements in the Accordion Pane but I don't know how to add or bind data to them. Here is my code

ASP Code

<atlasToolkit:Accordion ID="MyAccordion" runat="server" SelectedIndex="0"
HeaderCssClass="accordionHeader" ContentCssClass="accordionContent"
FadeTransitions="true" FramesPerSecond="40" TransitionDuration="250"
AutoSize="none" >
<atlasToolkit:AccordionPane ID="AccordionRest" runat="server" >
<Header>
<a href="http://links.10026.com/?link=" onclick="return false;" class="accordionLink">Restricted Items</a>
</Header>
<Content><h1>Restrict SKUs</h1>
<asp:Label ID="lRestricted" runat="server" Text="This Months Restricted SKUS"></asp:Label>
<asp:GridView ID="gvRestricted" runat="server"></asp:GridView> <!-- This is the GridView I want to DataBind my DataSet to -->
<asp:Button ID="bRestricted" runat="server" OnClick="bRest_Click1" Text="Button" />
</Content>
</atlasToolkit:AccordionPane>

< /atlasToolkit:Accordion>

C# code

protected void Page_Load(object sender, EventArgs e)
{
String invoice = Session["invoice"].ToString();
DataSet data = ws.fillMain(invoice); //webservice to returns a DataSet
GridView gvRest = (GridView)AccordionRest.ContentContainer.FindControl("gvRest"); //This how I would get GridView, but I doesn't work to add Data to a GridView
gvRest.DataSource = data.Tables[0];
gvRest.DataBind();
}

If anyone has run into this problem and has figured out how to do this please let me know, thank you

I would create and bind the gridview in codebehind...

<atlasToolkit:AccordionID="MyAccordion"runat="server"SelectedIndex="0"

HeaderCssClass="accordionHeader"ContentCssClass="accordionContent"

FadeTransitions="true"FramesPerSecond="40"TransitionDuration="250"AutoSize="None">

</atlasToolkit:Accordion>

code behind:

...

AccordianPane pane =newAccordionPane();

pane.HeaderContainer.Controls.Add(newLiteralControl("headerName"));

pane.ContentContainer.Controls.Add(GetGridView());

MyAccordion.Controls.Add(pane);

privateGridView GetGridView(){

GridView gridView =newGridView();

...

}

Thanks for the help that worked Perfect.

I was able to add and populate the GridView control on the Accordion Pane. But I ran into an new obsticle. I have added a CommandField column to my GridView, and I want to catch the event when my commandview is selected. But I don't know how to declare the OnSelectedIndexChange in the code behind, and i dont' know if I catching the event correctly. Any help would be greatly appreciated, I am fairly new to ASP and Atlas, so detailed explainations and code examples are greatley appreicated.

Here is my code.

protected void Page_Load(object sender, EventArgs e) {try { String invoice = Session["invoice"].ToString(); DataSet data = ws.fillCustomer(invoice); GridView gvRestricted = NewGridView();/*how do I add a Command Field Event so I can catch it*/ gvRestricted.DataSource = data.Tables[0]; gvRestricted.DataBind(); AccordionRest.ContentContainer.Controls.Add(gvRestricted); }catch { } }public GridView NewGridView() { CommandField delete =new CommandField(); delete.ShowDeleteButton =true; delete.DeleteText ="Clear"; GridView grid =new GridView(); grid.CssClass ="gridView"; grid.HeaderStyle.CssClass ="gridViewHeader"; grid.FooterStyle.CssClass ="gridViewFooter"; grid.AlternatingRowStyle.CssClass ="gridViewAlternate"; grid.PagerStyle.CssClass ="gridViewPager"; grid.RowStyle.CssClass ="gridViewRow"; grid.Columns.Add(delete);return grid; }void gvRest_DeleteIndexChanged(Object sender, EventArgs e) { GridView grid = (GridView)AccordionRest.ContentContainer.FindControl("gvRest"); GridViewRow row = grid.SelectedRow;/*This is where I need to hand the event of the command field being triggered*/ }

I found the solution

grid.SelectedIndexChanged += new EventHandler(grid_SelecetedIndexChanged);

void grid_SelectedIndexChanged(Object sender, EventsArgs e)
{

}

I created the grid in code behind and register the PAgeIndexChanging event, but when I click in a diferent Page number the event hadlr is not fired or is filtreded by the accordion control and I don't get to change the page. Besides the site does a Posta back, whichi is not correct, because the accordion is inside a UpdataPanel de Ajax.

I don't know how to solve this issue.

Thank in advance for you help.

Try doing this for each AccordionControl on your page in the Page_Load event (before doing anything else with the AccordionControls):

 
Accordion1.FindControl("dummy");
  

The "dummy" name isn't important, it's just that calling the FindControl method works around the problem. The full details of the problem were posted athttp://couldbedone.blogspot.com/2007/07/what-wrong-with-accordion-control.html (thanks to Yuriy!)

How do I change the Content in Accordion?

Is there any way to change text of the Content in Accordion dynamic?Hi falconyin,

Yes - you can access MyAccordion.Panes[0].Content.ContentContainer which derives from Panel, or you can include an <asp:Label> that you get access to with MyAccordion.FindControl.

Thanks,
Ted

How can retrieve data dynamically into the <content> tag of Accordion pane when clic

How can retrieve data dynamically into the <content> tag of <Accordion pane> when clicking a button which is in the <Header> tag of< Accordion pance>

Plase let me know if any possibility

Thanks,

Eswar

Hi,

I'm not sure if I understood you correctly. please try the sample below or feel free to let me know if I misunderstood you:

<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> protected void Page_Load(object sender, EventArgs e) { } void btnCommand(object sender, CommandEventArgs e) { int index = int.Parse(e.CommandArgument.ToString()); AjaxControlToolkit.AccordionPane ap = accordion1.Panes[index]; TextBox tb = ap.ContentContainer.FindControl("TextBox" + (index+1).ToString()) as TextBox; tb.Text = DateTime.Now.ToString(); }</script><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title>Untitled Page</title></head><body><form id="form1" runat="server"><asp:scriptmanager ID="Scriptmanager1" runat="server"></asp:scriptmanager><div> <input id="Button1" type="button" value="button" onclick="addTab();"/> <ajaxToolkit:Accordion runat="server" ID="accordion1"> <Panes> <ajaxToolkit:AccordionPane runat="server"> <Header> <asp:LinkButton ID="LinkButton1" runat="server" CommandArgument="0" OnCommand="btnCommand">LinkButton1</asp:LinkButton> </Header> <Content> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> </Content> </ajaxToolkit:AccordionPane> <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server"> <Header> <asp:LinkButton ID="LinkButton2" runat="server" CommandArgument="1" OnCommand="btnCommand">LinkButton2</asp:LinkButton> </Header> <Content> <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> </Content> </ajaxToolkit:AccordionPane> <ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server"> <Header> <asp:LinkButton ID="LinkButton3" runat="server" CommandArgument="2" OnCommand="btnCommand">LinkButton3</asp:LinkButton> </Header> <Content> <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox> </Content> </ajaxToolkit:AccordionPane> </Panes> </ajaxToolkit:Accordion> </div></form></body></html>