Introduction to Ajax Accordion Components

# Introduction:

The Accordion Control is a part of the Microsoft Ajax Toolkit. The Accordion is a web control that allows you to provide multiple panes and display them one at a time. The Accordion Control organizes your content into expandable Panes or Tabs which can be clicked to make the content of that Pane visible while hiding all the others. The Accordion is implemented as a web control that contains Accordion Pane web controls. Each Accordion Pane control has a template for its Header and its Content.

When used properly, the Accordion control can be a very effective UI element that can not only help you save costly screen real-estate, but will also make your site look more interactive and organized.

The Accordion control is one of the few independent or stand-alone controls in the Microsoft Ajax Toolkit. By standalone we mean that it does not extend the behavior of any existing ASP. Net control, and is instead implemented independently.

In this article we will learn how to use the Accordion Control in our websites, the different properties that can be modified to change the control appearance and the functionality that you can add.


# Steps to Add a simple static Accordion:

1 Open Visual Studio.

2 Start by creating a Web Form.

3 To add the Accordion control to your website begin by installing the Microsoft Ajax Toolkit on your computer, and reference the Microsoft Ajax Toolkit DLL in your project so that the Ajax controls appear in the Controls toolbox.

4 Register Assembly to the Web Page

<b><%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="AjaxToolkit" %></b>

5 Then we need to add an AJAX Script Manager to the form which will allow it to be AJAX Ready

<AjaxToolkit:ToolkitScriptManager ID="temoDemoProject"  runat="server" >  </AjaxToolkit:ToolkitScriptManager>

6 Controls will be added. Now you are prepare to use Ajax Accordion Controls.

7 Now Add the Accordion.

<AjaxToolkit:Accordion ID=”AccordionDemoProject” runat="server"> </AjaxToolkit:Accordion>

8 Add Accordion Panes:

<AjaxToolkit:Accordion ID=”AccordionDemoProject” runat="server"> <Panes>
<AjaxToolkit:AccordionPane runat="server" ID=”AccordionPane1DemoProject”> <Header>Pane 1</Header>
<Content>

This is the Content of our first pane in Ajax Accordion.

</Content>

</AjaxToolkit:AccordionPane>
<AjaxToolkit:AccordionPane ID="AccordionPane2DemoProject" runat="server">
<Header>Pane 2</Header>
<Content>

This is the Content of our Second pane in Ajax Accordion.

</Content>
</AjaxToolkit:AccordionPane>
<AjaxToolkit:AccordionPane ID="AccordionPane3DemoProject" runat="server">
<Header>Pane 3</Header>   <Content>

This is the Content of our Third pane in Ajax Accordion.

</Content>
</AjaxToolkit:AccordionPane>
</Panes>
</AjaxToolkit:Accordion>

This is the bare minimum code required to display an Accordion control on a page. Quite a bit isn’t it? And the display you’ll get out of it isn’t anything useful.

To make it look pretty we have to work a little more. But before that, let’s understand how the Accordion control works.

And for that let’s understand some Ajax Accordion Properties

#Properties in Ajax Accordion:

  1. HeaderCssClass – 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 an individual AccordionPane.
  2. HeaderSelectedCssClass – 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 an individual AccordionPane.
  3. ContentCssClass – 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 an individual AccordionPane.
  4. FadeTransitions – True to use the fading transition effect, false for standard transitions.
  5. TransitionDuration – Number of milliseconds to animate the transitions
  6. FramesPerSecond – Number of frames per second used in the transition animations
  7. AutoSize – Restrict the growth of the Accordion. The values of the AutoSize enumeration are described above.
  8. RequireOpenedPane – Prevent closing the currently opened pane when its header is clicked (which ensures one pane is always open). The default value is true.
  9. SuppressHeaderPostbacks – 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)
  10. Panes – Collection of AccordionPane controls
  11. HeaderTemplate – The Header template contains the markup that should be used for an pane’s header when data binding
  12. ContentTemplate – The Content template contains the markup that should be used for a pane’s content when data binding
  13. DataSource – The data source to use. DataBind() must be called.
  14. DataSourceID – The ID of the data source to use.
  15. DataMember – The member to bind to when using a DataSourceID
  16. SelectedIndex – The AccordionPane to be initially visible

Creating Dynamic Accordion :

We can create dynamic accordion with two ways

  1. By Using HeaderTemplate and Content Template and Binding Acccordion to a DataSource.
  2. By Using Accordion Panes (Accordion in Code-Behind ).

Now we will go step to step to show both ways

Let’s learn how we can make some real good Ajax magic happen inside the Accordion.

 a) By Using HeaderTemplate and Content Template and Binding Acccordion to a DataSource:

The Ajax Accordion is a Data aware control. This means that you can bind it to a data source. The data source can be a collection, or a DataSet that’s drawn from a database. To do data binding, you must set the HeaderTemplate, and the ContentTemplate to setup the data. In this case you will not have any Accordion Panes in the control as they will be generated on the runtime.

You can place any standard ASP.Net control inside the Accordion and use it in Code-Behind. You can also attach events to the controls and process them.

1 Create Style For the Accordion:

.AccordionStyle

{
border: 1px solid #e0cfc2;
background-color: #faf8f7;
}

.AccordionHeaderStyle {
border: 1px solid #cdc3b7; background-color:#ede4d4; font-weight:bold;
color: #8e2a08; cursor: pointer; background-image:url(../Images/p1.png); background-repeat:no-repeat; } .AccordionHeaderSelectedStyle
{

cursor: pointer;
color: #8e2a08;
font-weight:bold;
background-image:url(../Images/p2.png) ;
background-repeat:no-repeat;

}

.AccordionContentStyle

{
padding:10px 25px 10px;
background-color: #FAF8F7;
}

2 Register Assembly and Create Accordion:

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="AjaxToolkit" %>
<AjaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" > </AjaxToolkit:ToolkitScriptManager>
<AjaxToolkit:Accordion runat="server" id="accordSelectedDynamic" HeaderCssClass="AccordionHeaderStyle" ContentCssClass="AccordionContentStyle"
HeaderSelectedCssClass="AccordionHeaderSelectedStyle" CssClass="AccordionStyle" DataSourceID="ReportSelectedDateSource">
<HeaderTemplate>

<%#Container.DataItem("ReportName")%>
<asp:HyperLink ID="hlAccordion" runat="server" NavigateUrl='< %#Container.DataItem("SampleFileName")%>' Target="_blank"></asp:HyperLink>
<asp:Button ID="btnGenerate" runat="server" Text="Generate" CommandName="Generate" CommandArgument='<%#Container.DataItem("ReportID")%>' />

</HeaderTemplate>

<ContentTemplate>
<%#Container.DataItem("ReportDescription")%>
</ContentTemplate>
</AjaxToolkit:Accordion>

3 Create DataSource

<asp:SqlDataSource ID="ReportSelectedDateSource" Runat="server"
SelectCommand="SELECT * FROM [Reports] left join ReportCategories on Reports.ReportCategoryID=ReportCategories.ReportCategoryID order by ReportName asc "
ConnectionString="<%$ ConnectionStrings:RISCConnectionString %>">
</asp:SqlDataSource>

4 Go to code behind of the page and in Page Load dataBind the Accordion

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
accordSelectedDynamic.DataBind()
End Sub

Accordian_img_1

Fig(a)

b) By Using Accordion Panes (Accordion in Code-Behind ):

Like all standard ASP.Net controls, Accordions can be controlled from the code-behind too. Though it’s primarily a container control, so you wouldn’t have many situations in which you would want to do this.

You can place any standard ASP.Net control inside the Accordion and use it in Code-Behind. You can also attach events to the controls and process them.

1  Create StyleSheet for the Accordion:

.AccordionStyle
{
border: 1px solid #e0cfc2;
background-color: #faf8f7;

}

.AccordionHeaderStyle

{

border: 1px solid #cdc3b7; background-color:#ede4d4; font-weight:bold;
color: #8e2a08; cursor: pointer; background-image:url(../Images/p1.png); background-repeat:no-repeat; }
.AccordionHeaderSelectedStyle

{

cursor: pointer;
color: #8e2a08;
font-weight:bold;
background-image:url(../Images/p2.png) ;
background-repeat:no-repeat;

}

.AccordionContentStyle

{

padding:10px 25px 10px;
background-color: #FAF8F7; }

2 Register Assembly and Create Accordion:

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="AjaxToolkit" %>
<AjaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" > </AjaxToolkit:ToolkitScriptManager>
<AjaxToolkit:Accordion runat="server" ID="AccordInside" HeaderCssClass="AccordionHeaderStyle" ContentCssClass="AccordionContentStyle" RequireOpenedPane="false" HeaderSelectedCssClass="AccordionHeaderSelectedStyle" CssClass="AccordionStyle" >
</AjaxToolkit:Accordion>

3 Now go to code behind and call a method from the page load:

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
PopulateAcrDynamically()
End Sub

Sub PopulateAcrDynamically()
Dim l_objConn As SqlConnection 'Create the object of Connection
Dim l_objDataAdapter As SqlDataAdapter 'Create the Object of DatatAdapter
Dim l_objDt As New DataTable 'Create the Object of DataTable
Dim l_strID As String = vbEmpty
Dim l_strUserInfoQuery As String = vbEmpty 'Create a string object for the Query

'Creates the connection object.
l_objConn = New SqlConnection(Utilities.g_strConn)
'Opens the connection.
l_objConn.Open()
'Prepare the query
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
PopulateAcrDynamically()

End Sub

Sub PopulateAcrDynamically()
Dim l_objConn As SqlConnection 'Create the object of Connection
Dim l_objDataAdapter As SqlDataAdapter 'Create the Object of DatatAdapter
Dim l_objDt As New DataTable 'Create the Object of DataTable
Dim l_strID As String = vbEmpty
Dim l_strUserInfoQuery As String = vbEmpty 'Create a string object for the Query

'Creates the connection object.

l_objConn = New SqlConnection(Utilities.g_strConn)
'Opens the connection.
l_objConn.Open()

'Prepare the query

pn = New AjaxControlToolkit.AccordionPane() pn.ID = "pane" & l_intIncrement pn.HeaderContainer.Controls.Add(lblTitle)
pn.HeaderContainer.Controls.Add(btnContent)
pn.ContentContainer.Controls.Add(lblContent)
aj.Panes.Add(pn)
l_intIncrement = l_intIncrement + 1 Next

End If

End Sub

Accordian_img_2

Fig(b)

#References:
http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Accordion/Accordion.aspx
http://www.asp.net/web-forms/tutorials/ajax-control-toolkit/accordion/databinding-to-an-accordion-cs
http://www.codeproject.com/Articles/20751/How-To-Use-Accordion-and-Accordion-Pane-Controls-i
http://www.asp.net/web-forms/tutorials/ajax-control-toolkit/accordion/dynamically-adding-an-accordion-pane-cs

#Conclusion:
One important thing to remember is that the Accordion control pre-loads all of the data that’s in the panes when the page first shows up. So if you have a lot of data, all of it will be loaded before the page renders. If you put too much material in the Accordion, the page will take longer to load.

Don’t use the Accordion as an alternative for complete Pages, instead use it as an attractive UI element that spices up the look of your page, and makes it more interesting. I am sure you have seen Accordion like behavior on many websites, and can figure out where to make them look best.

Written By: Ashish Kumar, ASP.Net Developer, Mindfire Solutions

Advertisements

Posted on October 23, 2013, in ASP.Net and tagged , , , , , , , , , . Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: