You can do it just like other controls. Here's a small example:
<%@. 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"> /// <summary> /// Dynamically create our accordion panes /// </summary> protected override void OnLoad(EventArgs e) { base.OnLoad(e); AccordionPane pane1 = new AccordionPane(); pane1.HeaderContainer.Controls.Add(new LiteralControl("Pane 1")); pane1.ContentContainer.Controls.Add(new LiteralControl("Pane 2")); MyAccordion.Controls.Add(pane1); AccordionPane pane2 = new AccordionPane(); pane2.HeaderContainer.Controls.Add(new LiteralControl("Pane 2")); pane2.ContentContainer.Controls.Add(new LiteralControl("Content 2")); MyAccordion.Controls.Add(pane2); }</script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Accordion Demo</title> <style> .accordionHeader { border: 1px solid #2F4F4F; color: white; background-color: #2E4d7B; font-family: Arial, Sans-Serif; font-size: 12px; font-weight: bold; padding: 5px; margin-top: 5px; cursor: pointer; } .accordionContent { background-color: #D3DEEF; border: 1px dashed #2F4F4F; border-top: none; padding: 5px; padding-top: 10px; } </style></head><body><form runat="server"><div> <atlas:ScriptManager ID="Scripts" runat="server" /> <atlasToolkit:Accordion ID="MyAccordion" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader" ContentCssClass="accordionContent" FadeTransitions="true" FramesPerSecond="40" TransitionDuration="250" AutoSize="None"> </atlasToolkit:Accordion></div></form></body></html>Thanks,Ted
I think the code to add AccordinePane to Accordin is changed. the previous code didnt work for me.
// import Atlas Controlkit.
using System.Web.UI.HtmlControls;
using AtlasControlToolkit;
//Create a Atlas Accordion instance.
Accordion aAccord = new Accordion();
// Create AccordionPane instance.
AccordionPane accordPane = new AccordionPane();
// create your Header panel( the title of each Pane). and your component to each pane container.
// add Header Panel and Container panel, the panel which which will collape and open.
accordPane.HeaderContainer.Controls.Add( headerPanel );
accordPane.ContentContainer.Controls.Add( collapsePanel );
// add accordPane to Accordin instance.
aAccord.Panes.Add(accordPane);
// you can add as many AccordPanes as you want.
// Add Accordin object to the Panel.
myPanel.Controls.Add( aAccord );
Kishore.
Hi Kishore,
Yes - in response to user feedback we've hidden theControls collection and replaced it with the easier to useAccordionPane-onlyPanes collection.
Thanks,
Ted
Is there a way to add an unknown number of AccordionPanes? I'm trying to do thing:
List<string> addresses =newList<string>();addresses.Add("123 Main St, Phoenix, AZ, 85041");
addresses.Add("658 Alta Vista Rd, Phoenix, AZ, 85041");int name =1;
foreach (string sin addresses)
{
AccordionPane pane =newAccordionPane();
pane.HeaderContainer.Controls.Add(newLiteralControl(s));
pane.Width =
300;pane.ID ="pane" + name;
Accordion1.Controls.Add(pane);//it doesn't add the right pane because it's named wrong. What should I change?
name++;
}
Thanks!
And I can add the code in VB:
This is in AJAX.aspx (for example):
<ajaxToolkit:AccordionID="aDynamicky"runat="server">
<Panes></Panes>
</
ajaxToolkit:Accordion>And following is in code behind AJAX.aspx.vb:
Imports AjaxControlToolkit
Partial
Class AJAXInherits System.Web.UI.PageProtectedSub aDynamicky_PreRender(ByVal senderAsObject,ByVal eAs System.EventArgs)Handles aDynamicky.PreRenderDim panel1As AccordionPane =New AccordionPanepanel1.HeaderContainer.Controls.Add(
New LiteralControl("This is a header of 01."))panel1.ContentContainer.Controls.Add(
New LiteralControl("And here is the content of 01."))aDynamicky.Panes.Add(panel1)
Dim panel2As AccordionPane =New AccordionPanepanel2.HeaderContainer.Controls.Add(
New LiteralControl("This is a header of 02."))panel2.ContentContainer.Controls.Add(
New LiteralControl("And here is the content of 02."))aDynamicky.Panes.Add(panel2)
EndSubEnd
ClassOf course, you can format your panels via CSS.
KevInKauai: