Sunday, March 11, 2012

Nest the Accordion Control

Hi,

Yes you can. Like this:


<ajaxToolkit:Accordion ID="MyAccordion" runat="server" SelectedIndex="0"
HeaderCssClass="accordionHeader" ContentCssClass="accordionContent" SuppressHeaderPostbacks="true"
FadeTransitions="false" FramesPerSecond="40" TransitionDuration="250"
AutoSize="None" RequireOpenedPane="false" OnItemDataBound="MyAccordion_ItemDataBound"><Panes>
<ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server" HeaderCssClass="myclass">
<Header>
<a href="http://links.10026.com/?link=">
1. Accordion</a><asp:LinkButton ID="LinkButton2" runat="server">LinkButton</asp:LinkButton>

</Header>
<Content>
<asp:Panel ID="Panel1" runat="server" Width="100%">


// A nested accordion here


<ajaxToolkit:Accordion ID="Accordion1" runat="server" SelectedIndex="0"
HeaderCssClass="accordionHeader" ContentCssClass="accordionContent" SuppressHeaderPostbacks="true"
FadeTransitions="false" FramesPerSecond="40" TransitionDuration="250"
AutoSize="None" RequireOpenedPane="false"><Panes>
<ajaxToolkit:AccordionPane ID="AccordionPane5" runat="server" HeaderCssClass="myclass">
<Header>
<a href="http://links.10026.com/?link=">
1. Accordion</a><asp:LinkButton ID="LinkButton5" runat="server">LinkButton</asp:LinkButton>

</Header>

...........................

Hope this helps.


Thanks alot Raymond!Smile

I wanna do it dynamically based on the business logic I have...but if its possible like, I'm sure it won't be that difficult to make it dynamic.

Thanks again for your help,

Mon@.Smile


This is a sample that creates nested accordion dynamically.

<%@. 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) { Accordion ad = new Accordion(); ap1.ContentContainer.Controls.Add(ad); ad.ID = "child"; ad.SuppressHeaderPostbacks = true; for (int i = 0; i < 3; i++) { AccordionPane ap = new AccordionPane(); ad.Panes.Add(ap); LinkButton lb = new LinkButton(); ap.HeaderContainer.Controls.Add(lb); lb.Text = "header " + i.ToString(); Label l = new Label(); l.Text = DateTime.Now.ToString(); ap.ContentContainer.Controls.Add(l); } }</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="Accordion1" runat="server"> <Panes> <ajaxToolkit:AccordionPane runat="server" ID="ap1"> <Header>Header of parent</Header> <Content></Content> </ajaxToolkit:AccordionPane> <ajaxToolkit:AccordionPane runat="server" ID="AccordionPane1"> <Header>Header2 of parent</Header> <Content>Content</Content> </ajaxToolkit:AccordionPane> </Panes> </ajaxToolkit:Accordion> </div> </form></body></html>

Thanks alot Ray!Smile This helps!

Maybe I'm doing something wrong, but for some reason this will not work for me. Any hints, pointers?

No comments:

Post a Comment