Tuesday, 6 October 2015

Accordion control in Ajax Control Toolkit (ASP.Net)

In this Article, We will learn How to use Accordion control of AJAX Control Toolkit in ASP.Net.

Accordion control provides us multiple collapsible panes or panels where only one can be expanded at a time. Each AccordionPane control has a template for its Header and its content. Before proceeding, I recommend you to read:
How to add an AJAX Control Toolkit in Visual Studio

Let's Begin:

1) Go to File -> New -> Website and Create an Empty Website. Add a webform(Default.aspx) in it.
2) Add ScriptManager from AJAX Extensions (from v15.1 of AJAX Control Toolkit, ToolScriptManager is removed. Use Standard Script Manager).
ScriptManager Control

ScriptManager Code
3) Go to AJAX Control Toolkit in Toolbox and drop Accordion Control on Default.aspx.
Accordion Control
4) Add AccordionPane in Panes collection of the Accordion.
AccordionPane
AccordionPane contains two parts i.e. Header and Content. When AccordionPane is collapsed, only Header part is visible to us.
AccordionPane
Code (Default.aspx):
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Accordion Demo</title>
    <style>
        .headerCssClass{
            background-color:#c33803;
            color:white;
            border:1px solid black;
            padding:4px;
        }
        .contentCssClass{
            background-color:#e59a7d;
            color:black;
            border:1px dotted black;
            padding:4px;
        }
        .headerSelectedCss{
            background-color:#808080;
            color:white;
            border:1px solid black;
            padding:4px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div style="width:400px;">
            <ajaxToolkit:Accordion ID="Accordion1" runat="server" HeaderCssClass="headerCssClass" ContentCssClass="contentCssClass" HeaderSelectedCssClass="headerSelectedCss" FadeTransitions="true" TransitionDuration="500" AutoSize="None" SelectedIndex="0">
                <Panes>
                    <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
                        <Header>New User
                        </Header>
                        <Content><b><u>New User</u></b>
                            <table>
                                <tr><td>Name:</td><td><input type="text" /></td></tr>
                                <tr><td>Password:</td><td><input type="text" /></td></tr>
                                <tr><td>Re-Password:</td><td><input type="text" /></td></tr>
                                <tr><td></td><td><input type="button" value="Submit"/></td></tr>
                            </table>
                        </Content>
                    </ajaxToolkit:AccordionPane>
                    <ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
                        <Header>Login</Header>
                        <Content>
                            <b><u>Login User</u></b>
                            <table>
                                <tr><td>Name:</td><td><input type="text" /></td></tr>
                                <tr><td>Password:</td><td><input type="text" /></td></tr>
                                <tr><td></td><td><input type="button" value="Login"/></td></tr>
                            </table>
                        </Content>
                    </ajaxToolkit:AccordionPane>
                </Panes>
            </ajaxToolkit:Accordion>
        </div>
    </form>
</body>
</html>
In above code, I have used .headerCssClass(CSS class to use for the headers),.contentCssClass(CSS class to use for the content) and .headerSelectedCss(CSS class to use for the Selected headers) class for styling the Accordion Control.
Working Preview:
Accordion AJAX Control Tolkit

 Accordion control have several other properties like:
1. FadeTransitions: FadeTransitions is used for adding the transition effect.
2. SelectedIndex: The AccordionPane to be initially visible
SelectedIndex property of accordion
3. TransitionDuration: Number of milliseconds to animate the transitions.
4. Panes: Collection of AccordionPane controls

Hope you like it. Thanks.
[Download Source Code via Google Drive]

0 comments:

Post a Comment

Subscribe Now

Popular Posts

Contact us

Name

Email *

Message *

Subscribe us on YouTube

Like us on Facebook

Follow us on Google+