Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Ajax Accordion Control Example or how to use ajax accordion control in asp.net or working with Ajax Accordion Control

Apr 16, 2011
Introduction:

Here I will explain how to use the Ajax Accordion control in asp.net.
Description:
In Previous post I explained clearly how to show the progressbar during check the username availability using asp.net .Now I will explain how to use the Accordion control in asp.net. Accordion control is used to bind multiple panes and display one pane at a time. This control is like having multiple collapsiblepanels where only one can be opened at a time. To use Accordion control in our code we need to design code in certain format like below

<ajax:Accordion ID="Accordion1" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent" runat="server" SelectedIndex="0" FadeTransitions="true" SuppressHeaderPostbacks="true" TransitionDuration="250" FramesPerSecond="40" RequireOpenedPane="false" AutoSize="None">
<Panes>
<ajax:AccordionPane ID="AccPan1" runat="server">
<Header>...</Header>
<Content>...</Content>
</ajax:AccordionPane>
<ajax:AccordionPane ID="AccPan2" runat="server">
<Header>...</Header>
<Content>...</Content>
</ajax:AccordionPane>
</Panes>
</ajax:Accordion>
If we observe above code we declared so many properties for Accordion control here I will explain what each property is

SelectedIndex - This property is used to set initial AccordionPane to be visible.

HeaderCssClass – This CSS class property is used to apply style to Header of all AccordionPanes.

HeaderSelectedCssClass – This CSS class is used to change the color of selected AccordionPane.

ContentCssClass – This CSS class is used to update the AccordionPane.

FadeTransitions – This Property is used to set True to use the fading transition effect, false for standard transitions.

TransitionDuration – This Property is used to set the Number of milliseconds to animate the transitions

FramesPerSecond - This Property is used to set the Number of frames per second used in the transition animations.

RequireOpenedPane – This Property is used to Prevent closing the currently opened pane when its header is clicked (which ensures one pane is always open). The default value is true.

SuppressHeaderPostbacks – This Property is Prevent the client-side click handlers of elements inside a header from firing (this is especially useful when you want to include hyperlinks in your headers for accessibility)

AutoSize – This Property is used to set the height of the accordion control. This Property contains 3 types of varieties

1.           None- The Accordion grows/shrinks without restriction
2.           Auto- the Accordion never grows larger than the value specified by its Height property.
3.           Fill- The Accordion always stays the exact same size as its Height property

Panes - Collection of AccordionPane controls

HeaderTemplate - The Header template contains the markup that should be used for an pane's header when databinding

ContentTemplate - The Content template contains the markup that should be used for a pane's content when databinding

Now we can see how to use accordion control in our application for those first add AjaxControlToolkit reference to your application and add 

<%@ Register Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" tagPrefix="ajax" %>

To your aspx page and design your page likes this


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<title></title>
<style type="text/css">
.accordionContent {
background-color: #D3DEEF;
border-color: -moz-use-text-color #2F4F4F #2F4F4F;
border-right: 1px dashed #2F4F4F;
border-style: none dashed dashed;
border-width: medium 1px 1px;
padding: 10px 5px 5px;
width:20%;
}
.accordionHeaderSelected {
background-color: #5078B3;
border: 1px solid #2F4F4F;
color: white;
cursor: pointer;
font-family: Arial,Sans-Serif;
font-size: 12px;
font-weight: bold;
margin-top: 5px;
padding: 5px;
width:20%;
}
.accordionHeader {
background-color: #2E4D7B;
border: 1px solid #2F4F4F;
color: white;
cursor: pointer;
font-family: Arial,Sans-Serif;
font-size: 12px;
font-weight: bold;
margin-top: 5px;
padding: 5px;
width:20%;
}
.href
{
color:White
font-weight:bold;
text-decoration:none;
}
</style>
</head>
<body>
<form name="form1" id="form1" runat="server">
<ajax:ToolkitScriptManager ID="Scriptmanager1" runat="server"/>
<div >
<ajax:Accordion ID="UserAccordion" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader"
HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent" FadeTransitions="true" SuppressHeaderPostbacks="true" TransitionDuration="250" FramesPerSecond="40" RequireOpenedPane="false" AutoSize="None" >
<Panes>
<ajax:AccordionPane ID="AccordionPane1" runat="server">
<Header><a href="#" class="href">New User</a></Header>
<Content>
<asp:Panel ID="UserReg" runat="server">
<table align="center">
<tr>
<td></td>
<td align="right" >
</td>
<td align="center">
<b>Registration Form</b>
</td>
</tr>
<tr>
<td></td>
<td align="right" >
UserName:
</td>
<td>
<asp:TextBox ID="txtuser" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td></td>
<td align="right" >
Password:
</td>
<td>
<asp:TextBox ID="txtpwd" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td></td>
<td align="right">
FirstName:
</td>
<td>
<asp:TextBox ID="txtfname" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td></td>
<td align="right">
LastName:
</td>
<td>
<asp:TextBox ID="txtlname" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td></td>
<td align="right">
Email:
</td>
<td>
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td></td>
<td align="right" >
Phone No:
</td>
<td>
<asp:TextBox ID="txtphone" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td></td>
<td align="right" >
Location:
</td>
<td align="left">
<asp:TextBox ID="txtlocation" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td align="left" ><asp:Button ID="btnsubmit" runat="server" Text="Save"/>
<input type="reset" value="Reset" />
</td>
</tr>
</table>
</asp:Panel>
</Content>
</ajax:AccordionPane>
<ajax:AccordionPane ID="AccordionPane2" runat="server">
<Header><a href="#" class="href">User Detail</a></Header>
<Content>
<asp:Panel ID="Panel1" runat="server">
<table align="center">
<tr>
<td align="right" colspan="2">
UserName:
</td>
<td>
<b>Suresh Dasari</b>
</td>
</tr>
<tr>
<td align="right" colspan="2">
FirstName:
</td>
<td>
<b>Suresh</b>
</td>
</tr>
<tr>
<td align="right" colspan="2">
LastName:
</td>
<td>
<b>Dasari</b>
</td>
</tr>
<tr>
<td align="right" colspan="2">
Email:
</td>
<td>
<b>sureshbabudasari@gmail.com</b>
</td>
</tr>
<tr>
<td align="right" colspan="2" >
Phone No:
</td>
<td>
<b>1234567890</b>
</td>
</tr>
<tr>
<td align="right" colspan="2" >
Location:
</td>
<td align="left">
<b>Hyderabad</b>
</td>
</tr>
</table>
</asp:Panel>
</Content>
</ajax:AccordionPane>
<ajax:AccordionPane ID="AccordionPane3" runat="server">
<Header><a href="#" class="href">Job Details</a> </Header>
<Content>
<asp:Panel ID="Panel2" runat="server">
<table align="center">
<tr>
<td></td>
<td align="right">
Job Type:
</td>
<td>
<b>Software</b>
</td>
</tr>
<tr>
<td></td>
<td align="right">
Industry:
</td>
<td>
<b>IT</b>
</td>
</tr>
<tr>
<td></td>
<td align="right">
Designation:
</td>
<td>
<b>Software Engineer</b>
</td>
</tr>
<tr>
<td></td>
<td align="right">
Company:
</td>
<td>
<b>aspdotnet-suresh</b>
</td>
</tr>
<tr>
<td></td>
<td align="right" >
Phone No:
</td>
<td>
<b>1234567890</b>
</td>
</tr>
<tr>
<td></td>
<td align="right" >
Location:
</td>
<td align="left">
<b>Hyderabad</b>
</td>
</tr>
</table>
</asp:Panel>
</Content>
</ajax:AccordionPane>
</Panes>
</ajax:Accordion>
</div>
</form>
</body>
</html>



Demo

 Download sample code attached

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

14 comments :

Anonymous said...

Superb Brother nice site..................helpfull a lot

Abraham L.A. said...

A very good practical example thanks!

Anonymous said...

Nice breakdown in the explanation/usage of the Accordian Control

-L said...

This is just the exact same content as you'll find on http://www.ajaxcontroltoolkit.com/Accordion/Accordion.aspx with a little bit of your own stuff thrown in (i.e. content for each pane).

It still doesn't explain how you expand the different panes!!!

I've already got all this but nothing happens when I click on the pane headers

Anonymous said...
This comment has been removed by a blog administrator.
santanu sarma said...

thanx....very good eg...

Raju U said...

hi friend i need 3 textbox autocomplete work like cascaded dropdown list

Anonymous said...

hi , it is very good for practice but in dosent work when its width reduce to below 700 , also when we use the coloumn then it also dosent work

Shahabuddin shahab said...

Nice Post sir.
Sir tell me how to Hide all panel by default in Accordion controle

arun r said...

any one say how to use the same link tag in horizontal way.my MailId:arunjun6@gmail.com

Anonymous said...

Please send me all ajax control example :
pankajkoshti2010@gmail.com

mudit said...

sir please send me all ajax control ex:
swthrtislife@gmail.com

Annex Poudel said...

nice job bro it's like a social service for us thank u bro

Anonymous said...

hi suresh garu,
in accordian pane hyperlinks should be present.and clicking on hyperlink it is to be redirected to a new page.could u show us how to achieve this pls

Give your Valuable Comments

Other Related Posts

© 2010-2012 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.