Monday 10 June 2013

Ajax Accordion Control Example

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. 
It also supports three AutoSize modes so it can fit in a variety of layouts. 
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. 
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:
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