Ajax Accordion Control Example
Description
Ajax Accordion Panel helps to
create or develop a rich web page which also allows to put control inside it.
The Accordion is a web control that allows you to provide multiple panes and
display them one at a time. It is like having several CollapsiblePanels where
only one can be expanded at a time. The Accordion is implemented as a web control
that contains AccordionPane web controls. Each AccordionPane control has a
template for its Header and its Content. We keep track of the selected pane so
it stays visible across postbacks.
|
Property
|
description
|
|
None
|
The Accordion grows/shrinks without restriction. This
can cause other elements on your page to move up and down with it.
|
|
Limit
|
The Accordion never grows larger than the value
specified by its Height property. This will cause the content to scroll if it
is too large to be displayed.
|
|
Fill
|
The Accordion always stays the exact same size as its
Height property. This will cause the content to be expanded or shrunk if it
isn't the right size.
|
The Accordion control acts as a container of AccordionPane controls and it keeps track of the currentAccordionPane and automatically hides any other AccordionPane if it is visible. The AccordionPane controls has Header and Content templates to display heading and contents of the pane. The following figure shows two different views of AccordionPane controls inside Accordion control.
To start this tutorial, I have created a new page which has a ScriptManager control on the top. This control is required every time you want to use any AJAX feature or control on you website.
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
Next I have added the following markup for the Accordion control including its nested AccordionPanecontrols.
<ajax:Accordion ID="Accordion1" runat="server"
HeaderCssClass="Header" ContentCssClass="Contents"
HeaderSelectedCssClass="SelectedHeader"
Font-Names="Verdana" Font-Size="10"
BorderColor="#000000" BorderStyle="Solid" BorderWidth="1"
FramesPerSecond="100" FadeTransitions="true"
TransitionDuration="500">
<Panes>
<ajax:AccordionPane runat="server" ID="AccordionPane1">
<Header>Books</Header>
<Content>
<asp:RadioButtonList ID="RadioButtonList1" runat="server">
<asp:ListItem>HTML</asp:ListItem>
<asp:ListItem>PHP</asp:ListItem>
<asp:ListItem>XML</asp:ListItem>
</asp:RadioButtonList>
</Content>
</ajax:AccordionPane>
<ajax:AccordionPane runat="server" ID="AccordionPane2">
<Header>Movies</Header>
<Content>
<asp:RadioButtonList ID="RadioButtonList2" runat="server">
<asp:ListItem>Titanic</asp:ListItem>
<asp:ListItem>Speed</asp:ListItem>
<asp:ListItem>Shooter</asp:ListItem>
</asp:RadioButtonList>
</Content>
</ajax:AccordionPane>
<ajax:AccordionPane runat="server" ID="AccordionPane3">
<Header>Sports</Header>
<Content>
<asp:RadioButtonList ID="RadioButtonList3" runat="server">
<asp:ListItem>Football</asp:ListItem>
<asp:ListItem>Cricket</asp:ListItem>
<asp:ListItem>Snooker</asp:ListItem>
</asp:RadioButtonList>
</Content>
</ajax:AccordionPane>
</Panes>
</ajax:Accordion>
The following section explains some of the Accordion control properties in detail.
SelectedIndex: As I mentioned above the Accordion control can have multiple AccordionPane controls inside its Panes collection so this property specifies which one of those panes you want to make it visible when the page first loads. You can set it to 0 to display the first or top pane.
HeaderCssClass: This property needs the name of the CSS class that you want to use to style the header section of all the AccordionPane controls inside Accordion control. You can also specify styles for individual AccordionPane controls by settings AccordionPane property instead of setting this property at Accordion control level.
HeaderSelectedCssClass: This property specifies the name of the CSS class you want to use for the selected AccordionPane header. This property can also be set for individual AccordionPane controls.
ContentCssClass: This property specifies the name of the CSS class you want to use to style the content area of the AccordionPane controls.
The CSS classes I have used in this tutorial are shown below.
<style type="text/css">
.Header
{
background-color: #000000;
color: White;
padding: 4px;
font-weight: bold;
}
.SelectedHeader
{
background-color: #808080;
color: White;
padding: 4px;
font-weight: bold;
}
.Contents
{
background-color: #f3f3f3;
padding: 5px;
}
</style>
FadeTransitions: This is a Boolean property to specify whether you need the fading transition effect or standard transition effect for AccordionPane controls.
TransitionDuration: This property needs the number of milliseconds you can to set to increase or decrease the speed of transition effect.
FramesPerSecond: This property specifies the number of frames per second the Accordion control will use to animate the transition between AccordionPane controls.
The Accordion control has Panes collection which contains the collection of AccordionPane controls as you can see in the above markup. I have used simple static text in the Header template and RadioButtonList controls in the Content template of each of the above AccordionPane controls but you are free to use any control or contents you want in your applications.
The Accordion control can also be data bound. It has DataSource and DataSourceID properties which can be set just like other ASP.NET standard data bound controls. The Accordion control also has HeaderTemplate and ContentTemplate properties which you can use to set you data items when Accordion control is data bound.
Creating a Simple Accordion
In this tutorial, you learn how to add an Ajax Control Toolkit
Accordion to a page and show three panes of content. There are four steps: (1)
Add a ToolkitScriptManager (2) Add an Accordion (3) Add AccordionPanes (4) Add
Accordion styles.
To learn how to install the Ajax Control Toolkit, see the Ajax Control Toolkit page.
Add a
ToolkitScriptManager
Before
you can use any of the Ajax Control Toolkit controls in a page, you first need
to add a ToolkitScriptManager to the page. You can drag the
ToolkitScriptManager from the Visual Studio Toolbox window onto the page. The
ToolkitScriptManager is located in theAjax Control Toolkit tab under the Toolbox.
1.
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
2.
</asp:ToolkitScriptManager>
Add an
Accordion
Next,
in source view, you need to add an Accordion control. You can drag the
Accordion control from the Toolbox or type the tag yourself:
1.
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
2.
</asp:ToolkitScriptManager>
3.
4.
<asp:Accordion
5.
ID="Accordion1"
6.
runat="server">
7.
</asp:Accordion>
Add
AccordionPanes
Next,
in source view, add one or more AccordionPane controls. The Accordion displays
a single AccordionPane at a time. Notice that each AccordionPane contains both
a header and content tag.
header and content tag.
1.
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
2.
</asp:ToolkitScriptManager>
3.
4.
<asp:Accordion
5.
ID="Accordion1"
6.
runat="server">
7.
<Panes>
8.
<asp:AccordionPane runat="server">
9.
<Header>Pane 1</Header>
10.
<Content>
11.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
12.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
13.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
14.
</Content>
15.
</asp:AccordionPane>
16.
<asp:AccordionPane ID="AccordionPane1" runat="server">
17.
<Header>Pane 2</Header>
18.
<Content>
19.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
20.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
21.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
22.
</Content>
23.
</asp:AccordionPane>
24.
<asp:AccordionPane ID="AccordionPane2" runat="server">
25.
<Header>Pane 3</Header>
26.
<Content>
27.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
28.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
29.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
30.
</Content>
31.
</asp:AccordionPane>
32.
</Panes>
33.
</asp:Accordion>
Add
Accordion Styles
An
Accordion without any Cascading Style Sheet styles applied to it does not look
very nice. The final step is to add one or more styles to the Accordion
control:
Notice that the page contains the definition of four Cascading Style Sheet
classes named accordion, accordionHeader, accordionHeaderSelected, and
accordionContent. These styles are applied to the Accordion control by setting
the CssClass, HeaderCssClass, HeaderSelectedCssClass, and ContentCssClass
properties.
1.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AccordionSimple.Default" %>
2.
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
3.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4.
<html xmlns="http://www.w3.org/1999/xhtml">
5.
<head runat="server">
6.
<title>Simple Accordion</title>
7.
<style type="text/css">
8.
.accordion {
9.
width: 400px;
10.
}
11.
12.
.accordionHeader {
13.
border: 1px solid #2F4F4F;
14.
color: white;
15.
background-color: #2E4d7B;
16.
font-family: Arial, Sans-Serif;
17.
font-size: 12px;
18.
font-weight: bold;
19.
padding: 5px;
20.
margin-top: 5px;
21.
cursor: pointer;
22.
}
23.
24.
.accordionHeaderSelected {
25.
border: 1px solid #2F4F4F;
26.
color: white;
27.
background-color: #5078B3;
28.
font-family: Arial, Sans-Serif;
29.
font-size: 12px;
30.
font-weight: bold;
31.
padding: 5px;
32.
margin-top: 5px;
33.
cursor: pointer;
34.
}
35.
36.
.accordionContent {
37.
background-color: #D3DEEF;
38.
border: 1px dashed #2F4F4F;
39.
border-top: none;
40.
padding: 5px;
41.
padding-top: 10px;
42.
}
43.
</style>
44.
45.
</head>
46.
<body>
47.
<form id="form1" runat="server">
48.
<div>
49.
50.
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
51.
</asp:ToolkitScriptManager>
52.
53.
<asp:Accordion
54.
ID="Accordion1"
55.
CssClass="accordion"
56.
HeaderCssClass="accordionHeader"
57.
HeaderSelectedCssClass="accordionHeaderSelected"
58.
ContentCssClass="accordionContent"
59.
runat="server">
60.
<Panes>
61.
<asp:AccordionPane runat="server">
62.
<Header>Pane 1</Header>
63.
<Content>
64.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
65.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
66.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
67.
</Content>
68.
</asp:AccordionPane>
69.
<asp:AccordionPane ID="AccordionPane1" runat="server">
70.
<Header>Pane 2</Header>
71.
<Content>
72.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
73.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
74.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
75.
</Content>
76.
</asp:AccordionPane>
77.
<asp:AccordionPane ID="AccordionPane2" runat="server">
78.
<Header>Pane 3</Header>
79.
<Content>
80.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
81.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
82.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
83.
</Content>
84.
</asp:AccordionPane>
85.
</Panes>
86.
</asp:Accordion>
87.
88.
</div>
89.
</form>
90.
</body>
91.
</html>
Notice that the page contains the definition of four Cascading Style Sheet classes named accordion, accordionHeader, accordionHeaderSelected, and accordionContent. These styles are applied to the Accordion control by setting the CssClass, HeaderCssClass, HeaderSelectedCssClass, and ContentCssClass properties.
No comments:
Post a Comment