Thursday, September 01, 2011

Sample Code for Accordion Control in AJAX

Posted by Rahul Kharde at 4:10 AM
Here I will explain how to use the Ajax Accordion control in asp.net.

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 postback

Below are the properties for Accordion control

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

Example 

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

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

And 

<asp:ScriptManager ID="ScriptManager1" runat="server" />

HTML

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Accordion Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <ajaxToolkit:Accordion runat="server" ID="theAccordion" SelectedIndex="0" AutoSize="Limit"
            BackColor="#E1E1E1" FadeTransitions="true" TransitionDuration="333" FramesPerSecond="30"
            Width="200px" Font-Names="Verdana" Font-Size="Smaller">
            <Panes>
                <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
                    <Header>
                        <div style="background: #C2A6FF; font-size: medium; cursor: hand; border: 1px Solid #000000;">
                            Menu 1
                        </div>
                    </Header>
                    <Content>
                        <div>
                            <ul style="list-style-type: none;">
                                <li><a href="#">Sub Menu 1</a>li>
                                    <li><a href="#">Sub Menu 2</a>li>
                                        <li><a href="#">Sub Menu 3</a>li>
                                            <li><a href="#">Sub Menu 4</a>li>
                                                <li><a href="#">Sub Menu 5</a>li>
                            </ul>
                        </div>
                    </Content>
                </ajaxToolkit:AccordionPane>
                <ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
                    <Header>
                        <div style="background: #C2A6FF; font-size: medium; cursor: hand; border: 1px Solid #000000;">
                            Menu 2
                        </div>
                    </Header>
                    <Content>
                        <div>
                            <ul style="list-style-type: none;">
                                <li><a href="#">Sub Menu 1</a>li>
                                    <li><a href="#">Sub Menu 2</a>li>
                                        <li><a href="#">Sub Menu 3</a>li>
                                            <li><a href="#">Sub Menu 4</a>li>
                                                <li><a href="#">Sub Menu 5</a>li>
                            </ul>
                        </div>
                    </Content>
                </ajaxToolkit:AccordionPane>
                <ajaxToolkit:AccordionPane ID="AccordionPane3" runat="server">
                    <Header>
                        <div style="background: #C2A6FF; font-size: medium; cursor: hand; border: 1px Solid #000000;">
                            Menu 3
                        </div>
                    </Header>
                    <Content>
                        <div>
                            <ul style="list-style-type: none;">
                                <li><a href="#">Sub Menu 1</a>li>
                                    <li><a href="#">Sub Menu 2</a>li>
                                        <li><a href="#">Sub Menu 3</a>li>
                                            <li><a href="#">Sub Menu 4</a>li>
                                                <li><a href="#">Sub Menu 5</a>li>
                            </ul>
                        </div>
                    </Content>
                </ajaxToolkit:AccordionPane>
                <ajaxToolkit:AccordionPane ID="AccordionPane4" runat="server">
                    <Header>
                        <div style="background: #C2A6FF; font-size: medium; cursor: hand; border: 1px Solid #000000;">
                            Menu 4
                        </div>
                    </Header>
                    <Content>
                        <div>
                            <ul style="list-style-type: none;">
                                <li><a href="#">Sub Menu 1</a>li>
                                    <li><a href="#">Sub Menu 2</a>li>
                                        <li><a href="#">Sub Menu 3</a>li>
                                            <li><a href="#">Sub Menu 4</a>li>
                                                <li><a href="#">Sub Menu 5</a>li>
                            </ul>
                        </div>
                    </Content>
                </ajaxToolkit:AccordionPane>
            </Panes>
        </ajaxToolkit:Accordion>
    </div>
    </form>
</body>
</html>

 

For Download source code Click Here





If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!


Kindly Bookmark and Share it:

YOUR ADSENSE CODE GOES HERE

0 comments:

Have any question? Feel Free To Post Below:

 

Popular Posts

Recent Comments

© 2011. All Rights Reserved | Help to understand .Net | Template by Blogger Widgets

Home | About | Top