Ajax Accordion example to create Vertical DropDown menu in asp.net

Introduction: In this article I am going to explain with example how to use Ajax Accordion control to create Vertical Drop Down menu with sub menu option in asp.net.

Accordion control to create menu in asp.net

Description: In previous articles i explained the examples of Ajax AutoCompleteExtender control example in asp.net using C#,VB.Net without using web service and Drag & drop to upload multiple files using AjaxFileUpload like Facebook in asp.net and Create drop down menu for login and signup using jQuery and CSS in asp.net and Fill dropdownlist with days, month and year and jQuery stylish dropdown menu example like Facebook,Linkedin and Ajax CascadingDropDown example in asp.net to Fill DropDownList with Countries,states and cities and Get age in years,months,days,hours and seconds from DOB in asp.net C#,Vb.Net
The Accordion control provided by the Ajax is a web control that allows us to provide multiple panes in the small area of the page and display them one at a time. When one pane is opened other will be closed. So it is like having multiple Collapsible Panels where only one can be expanded at a time. Other panes can be opened by clicking on the desired pane as shown in the Image.

Below are some of the properties of the Accordion control that can be set as per requirement.

SelectedIndex – This property sets AccordionPane to be initially visible e.g. if set to 0 then very first AccordionPane will be opened(it is default)
HeaderCssClass – It is the Name of the CSS class to use for the headers. This can be either applied to the Accordion as a default for all AccordionPanes, or for an individual AccordionPane.
HeaderSelectedCssClass – It is the Name of the CSS class to use for the selected header. This can be either applied to the Accordion as a default for all AccordionPanes, or for an individual AccordionPane.
ContentCssClass – It is the Name of the CSS class to use for the content. This can be either applied to the Accordion as a default for all AccordionPanes, or for an individual AccordionPane.
FadeTransitions – Set this property to True to use the fading transition effect and set to false for standard transitions.
TransitionDuration – It is Number of milliseconds to animate the transitions e.g. 350 in our example.
FramesPerSecond – It is Number of frames per second used in the transition animations e.g. 60 in our example.
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 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)
Panes – It is a 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
DataSource – If data source is used then DataBind() must be called.
DataSourceID - The ID of the data source to use.
DataMember - The member to bind to when using a DataSourceID
AutoSize – This Property is used to set the height of the accordion control. This Property has 3 types

None- Using this Accordion can grows/shrinks without restriction
Auto- Using this 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 in the specified height.
Fill- The Accordion always stays in 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.

Implementation: Let’s understand by practical example.

Place a ScriptManager control from the AJAX Extensions category of the Visual Studio's toolbox.

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

</asp:ScriptManager>

Place a Accordion control from the Ajax Control Toolkit and design as mentioned below. If you have not installed the AjaxControlToolkit then read the article How to install AjaxControlToolkit in Visual Studio.

<asp:Accordion ID="Accordion1" runat="server" SelectedIndex="0" AutoSize="Limit"

BackColor="#EF8421" FadeTransitions="true" TransitionDuration="350" FramesPerSecond="60" RequireOpenedPane="true" Width="200px" Font-Names="Verdana" Font-Size="Smaller">

<Panes>

<asp:AccordionPane ID="AccordionPane1" runat="server">

Menu 1

</div>

</Header>

</ul>

</div>

</Content>

</asp:AccordionPane>

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

Menu 2

</div>

</Header>

</ul>

</div>

</Content>

</asp:AccordionPane>

<asp:AccordionPane ID="AccordionPane3" runat="server">

Menu 3

</div>

</Header>

</ul>

</div>

</Content>

</asp:AccordionPane>

</Panes>

</asp:Accordion>

Have you noticed the line <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %> added automatically next to the very first line in the design page. Actually it registers the Ajax Control on placing Accordion control on design page.

Note: If you want the Headers of the Accordion control to be Clickable i.e. act as a main menu then replace the Menu 1 with <a href="#" style="color:#FFF; text-decoration:none; margin-left:10px;"> Menu 1</a>

Similarly Menu 2 with <a href="#" style="color:#FFF; text-decoration:none; margin-left:10px;"> Menu 2</a> and so on.

GN SOMRO .NET CODING

Monday, 17 March 2014

Ajax Accordion example to create Vertical DropDown menu in asp.net

Ajax Accordion example to create Vertical DropDown menu in asp.net

No comments:

Post a Comment