I'm trying to create dynamic accordion panes for use in an accordion as a menu. I have the controls inside the accordionpanes working, but I'm trying to format the header for the panels and I'm running into a problem. The code is as follows:
dim mypane as accordionpane
'add controls
dim myLabel as label
mylabel.text = "some label"
mypane.controls.add(mylabel)
'add header
mypane.header = new headerTemplate("someheaderlabel","someurl")
myaccorion .pane.add(mypane)
the code for headerTemplate is:
private class headerTemplate
implements itemplate
dim headerlabel as string
dim headerurl as string
public sub new(byval label as string,byval url as string)
headerlabel = label
headerurl = url
end sub
public sub instantiatein (ByVal container As System.Web.UI.Control) Implements System.Web.UI.ITemplate.InstantiateIn
dim myheader as new literalcontrol
myheader.text = headerlabel
dim myurl as new linkbutton
myurl.text = "(Show All")
myurl.postbackurl = headerurl
container.controls.add(myheader)
container.controls.add(myurl)
end sub
The 'new' sub is run on the 'mypane.header = new headerTemplate("someheaderlabel","someurl") ' line, but the instantiatein is never fired. What am I doing wrong?
OK - I found an easier way to do it - just add the controls to the accordianpane.headercontrols.
Now when I test it (I have 2 hard coded panes and one that I create programatically), the two hard-coded panes expand and collapse fine, but the one i created programatically doesn't collapse (but does make the hard coded ones collapse when i click on it). Has anybody else run across this before? If so, how did you fix it?
I'm having the same problem. Programatically created accordion panes do not collapse. Can anyone please help?
Hi,
Here is a sample made as your description, it works fine. Please try it:
<%@. 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) { //TextBox tb = new TextBox(); //MyAccordion.HeaderSelectedCssClass = ""; //AccordionPane1.HeaderContainer.Controls.Add(tb); AccordionPane ap = new AccordionPane(); MyAccordion.Panes.Add(ap); LinkButton lb = new LinkButton(); lb.Text = "hello"; ap.HeaderContainer.Controls.Add(lb); TextBox tb2 = new TextBox(); ap.ContentContainer.Controls.Add(tb2); }</script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <ajaxToolkit:Accordion ID="MyAccordion" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader" ContentCssClass="accordionContent" FadeTransitions="false" FramesPerSecond="40" TransitionDuration="250" AutoSize="None" RequireOpenedPane="false" SuppressHeaderPostbacks="true"> <Panes> <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server"> <Header><a href="http://links.10026.com/?link=">1. Accordion</a></Header> <Content> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1" ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator> <asp:Button ID="Button1" runat="server" Text="Button" /> The Accordion is a web control that allows you to provide multiple panes and display them one at a time. It is like having several where only one can be expanded at a time. The Accordion is implemented as a web control that contains AccordionPane web controls. Each AccordionPane control has a template for its Header and its Content. We keep track of the selected pane so it stays visible across postbacks. </Content> </ajaxToolkit:AccordionPane> <ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server"> <Header><a href="http://links.10026.com/?link=">2. AutoSize</a></Header> <Content> <p>It also supports three AutoSize modes so it can fit in a variety of layouts.</p> <ul> <li><b>None</b> - The Accordion grows/shrinks without restriction. This can cause other elements on your page to move up and down with it.</li> <li><b>Limit</b> - The Accordion never grows larger than the value specified by its Height property. This will cause the content to scroll if it is too large to be displayed.</li> <li><b>Fill</b> - The Accordion always stays the exact same size as its Height property. This will cause the content to be expanded or shrunk if it isn't the right size.</li> </ul> <asp:Button ID="Button2" runat="server" Text="Button" /> </Content> </ajaxToolkit:AccordionPane> <ajaxToolkit:AccordionPane ID="AccordionPane3" runat="server"> <Header><a href="http://links.10026.com/?link=">3. Control or Extender</a></Header> <Content> The Accordion is written using an extender like most of the other extenders in the AJAX Control Toolkit. The extender expects its input in a very specific hierarchy of container elements (like divs), so the Accordion and AccordionPane web controls are used to generate the expected input for the extender. The extender can also be used on its own if you provide it appropriate input. </Content> </ajaxToolkit:AccordionPane> </Panes> </ajaxToolkit:Accordion> </div> <script type="text/javascript"> function pageLoad(sender, args) { var behavior = $find('MyAccordion_AccordionExtender'); behavior.add_selectedIndexChanged(onSelectedIndexChanged); } function onSelectedIndexChanged(sender, args) { } </script> </form></body></html> Hope this helps. I have solved my problem by changing mypane.controls.add() to mypane.contentcontainer.add().
