Ajax Accordion

\\ Static Accordion

Create one user control called StaticAccordion.ascx :

<div>
<asp:Accordion
ID=”MyAccordion”
runat=”Server”
SelectedIndex=”0″
HeaderCssClass=”accordionHeader”
HeaderSelectedCssClass=”accordionHeaderSelected”
ContentCssClass=”accordionContent”
AutoSize=”None”
FadeTransitions=”true”
TransitionDuration=”250″
FramesPerSecond=”40″
RequireOpenedPane=”false”
SuppressHeaderPostbacks=”true”>
<Panes>
<asp:AccordionPane runat=”server” ID=”Pane1″
HeaderCssClass=”accordionHeader”
HeaderSelectedCssClass=”accordionHeaderSelected”
ContentCssClass=”accordionContent”>
<Header>Hello</Header>
<Content>Hello : I’m in the rock city..</Content>
</asp:AccordionPane>
<asp:AccordionPane ID=”AccordionPane1″ runat=”server”
HeaderCssClass=”accordionHeader”
HeaderSelectedCssClass=”accordionHeaderSelected”
ContentCssClass=”accordionContent”>
<Header>Bye</Header>
<Content>Bye : Take care..</Content>
</asp:AccordionPane>
</Panes>
</asp:Accordion>
</div>

Create one aspx page add usercontrol into that StaticPage.aspx :

<link href=”StyleSheet.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<form id=”form1″ runat=”server”>
<asp:ScriptManager ID=”ScriptManager1″ runat=”server”>
</asp:ScriptManager>
<div id=”StaticAccordion”>
<uc:Accordion ID=”ucAccordion” runat=”server” />
</div>
<br />

</form>
</body>

Create Stylesheet.css

body
{

}

.accordion
{
width: 425px;
}

.accordionHeader
{
border: 1px solid #2F4F4F;
color: white;
background-color:#1B89BC;
font-family: Arial, Sans-Serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
margin-top: 5px;
cursor: pointer;
width: 425px;
}

.accordionHeaderSelected
{

border: 1px solid #2F4F4F;
color: white;
background-color:#28ADEE;
font-family: Arial, Sans-Serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
margin-top: 5px;
cursor: pointer;
width: 425px;
}

.accordionContent
{
background-color: #fff;
border: 1px solid #2F4F4F;
border-top: none;
padding: 15px;
padding-top: 15px;
width: 405px;
}

For Dynamic Accordion

Add one usercontrol DynamicAccordion.ascx with follwing code :
<div>
<asp:Accordion ID=”acrDynamic” runat=”server” SelectedIndex=”0″
HeaderCssClass=”accordionHeader” ContentCssClass=”accordionContent “>
</asp:Accordion>

</div>

Inside Dynamic.aspx page add DynamicAccordion.ascx control:
<head runat=”server”>
<title></title>
<link href=”StyleSheet.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<form id=”form1″ runat=”server”>
<asp:ScriptManager ID=”ScriptManager1″ runat=”server”>
</asp:ScriptManager>
<div>
<uc:DynamicAccordion  ID=”ucDynamicAccordion” runat=”server”  />
</div>
</form>
</body>

Add the reference of  same stylesheet.css

ON code behind of USER CONTROL i.e DynamicAccordion.ascx.cs code :

protected void Page_Load(object sender, EventArgs e)
{
PopulateAcrDynamically();
}
private void PopulateAcrDynamically()
{
try
{
string sql = “select * from MyData”;
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings[“dbConnection”].ToString());
//con.Open();
SqlCommand cmd = new SqlCommand(sql, con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
if (ds.Tables[0].Rows.Count != 0)
{
Label lbTitle;
Label lbContent;
AjaxControlToolkit.Accordion acrDynamic;
AjaxControlToolkit.AccordionPane pn;
int i = 0;     // This is just to use for assigning pane an id
foreach (DataRow dr in ds.Tables[0].Rows)
{
lbTitle = new Label();
lbContent = new Label();
lbTitle.Text = dr[“Title”].ToString();
lbContent.Text = dr[“Detail”].ToString();
acrDynamic = new AjaxControlToolkit.Accordion();
pn = new AjaxControlToolkit.AccordionPane();
pn.ID = “Pane” + i;
pn.HeaderContainer.Controls.Add(lbTitle);
pn.ContentContainer.Controls.Add(lbContent);
acrDynamic.Panes.Add(pn);
++i;
}
}
}
catch (Exception)
{
throw;
}

}

In config file :

<connectionStrings>
<add name=”dbConnection” connectionString=”Data Source=SYNDLF371;Initial Catalog=mydata;Integrated Security=True”/>
</connectionStrings>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s