ASP.NET WITH C#: June 2012

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

<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">

</ajax:AccordionPane>

<ajax:AccordionPane ID="AccPan2" runat="server">

</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

.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>

<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">

<asp:Panel ID="UserReg" runat="server">

<tr>

</td>

<b>Registration Form</b>

</td>

</tr>

<tr>

UserName:

</td>

<td>

<asp:TextBox ID="txtuser" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

Password:

</td>

<td>

<asp:TextBox ID="txtpwd" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

FirstName:

</td>

<td>

<asp:TextBox ID="txtfname" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

LastName:

</td>

<td>

<asp:TextBox ID="txtlname" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

Email:

</td>

<td>

<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

Phone No:

</td>

<td>

<asp:TextBox ID="txtphone" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

Location:

</td>

<asp:TextBox ID="txtlocation" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</asp:Panel>

</Content>

</ajax:AccordionPane>

<ajax:AccordionPane ID="AccordionPane2" runat="server">

<Header><a href="#" class="href">User Detail</a></Header>

<asp:Panel ID="Panel1" runat="server">

<tr>

UserName:

</td>

<td>

<b>Suresh Dasari</b>

</td>

</tr>

<tr>

FirstName:

</td>

<td>

<b>Suresh</b>

</td>

</tr>

<tr>

LastName:

</td>

<td>

<b>Dasari</b>

</td>

</tr>

<tr>

Email:

</td>

<td>

<b>sureshbabudasari@gmail.com</b>

</td>

</tr>

<tr>

Phone No:

</td>

<td>

</td>

</tr>

<tr>

Location:

</td>

<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>

<asp:Panel ID="Panel2" runat="server">

<tr>

Job Type:

</td>

<td>

<b>Software</b>

</td>

</tr>

<tr>

Industry:

</td>

<td>

</td>

</tr>

<tr>

Designation:

</td>

<td>

<b>Software Engineer</b>

</td>

</tr>

<tr>

Company:

</td>

<td>

<b>aspdotnet-suresh</b>

</td>

</tr>

<tr>

Phone No:

</td>

<td>

</td>

</tr>

<tr>

Location:

</td>

<b>Hyderabad</b>

</td>

</tr>

</table>

</asp:Panel>

</Content>

</ajax:AccordionPane>

</Panes>

</ajax:Accordion>

</div>

</form>

</body>

</html>

Demo

Thursday 28 June 2012

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