AJAX Control Toolkit Tutorial: Accordion - Part Two

Article

Welcome to the series of AJAX Control Toolkit Articles, Today we will discuss the first control of the Toolkit which is Accordion.

You cal learn about my previous part here:

AJAX Control Toolkit Tutorial: Introduction - Part One

Accordion Web Control contains multiple panes and shows one at a time. The panes contain content of images and text having wide range of supported properties from formatting of the panes and text, like header and content templates, also it formats the selected header template.

Accordion contains multiple collapsible panes while one can be shown at a time and the extended features of accordion also has support data source which points to the DataSourceID and binds through .DataBind() method and also you need to specify the Header and Content template to show the data.

While the page posts back several times accordion can retain its state of opened collapsible panel. It does not mean that any collapsible panel which you opened at a time an then post back the page it keep track of that position but it retain state of only specified mentioned collapsible pane at the time of first time loading.

Accordion has also Auto Size property which is suitable for multiple layouts. We will discuss it later on with examples.

Accordion is also an extender control which can be placed in a container like div and so on. Extender controls are those controls which extend the functionality of your current work just as an example you have lot of paragraphs in a single page and you don’t have much space and want to summarize in small space then you need to embed to the div or some container which can hold all the information in accordion collapsible pans.

So let’s practically do something to test the properties of accordion, in the introductory article I have finished to setup your environment for AJAX Control Toolkit.

If you have missed it then check it from Here.

I have Created a New application and after installation of Ajax control toolkit I have dragged and dropped accordion control to the web form page of .aspx extension from toolbox.

After that initially the output looks like this.

Let’s start to check out the features one by one.

Firstly, we are heading toward to test the style of accordion.

1. Style the accrodion

Now we apply some styling so that it looks beautiful. To do that we will add these properties to the ajax control tookit accordion control.

HeaderCssClass="accordionHeader"
HeaderSelectedCssClass="accordionHeaderSelected"
ContentCssClass="accordionContent"

HeaderCssClass as the name suggests it is the style to control the header of the collapsible pan.
HeaderSelectedCssClass is the style of the selected indexed pan which is opened by default at page load.
ContentCssClass is the style which will show its impact in the content template of pan.

All of these are classes and they are to be define in the style tag placed inside head tag.

Full code of the classes is given below:

<style type="text/css">
.accordionHeader {
color: white;
background-color: #719DDB;
font: bold 11px auto "Trebuchet MS", Verdana;
font-size: 12px;
cursor: pointer;
padding: 4px;
margin-top: 3px;
}
.accordionHeaderSelected {
background-color: #5078B3;
border: 1px solid #2F4F4F;
color: white;
cursor: pointer;
font-family: Arial, Sans-Serif;
font-size: 12px;
font-weight: bold;
margin-top: 5px;
padding: 5px;
width: 100%;
}
.accordionContent {
background-color: #DCE4F9;
font: normal 10px auto Verdana, Arial;
border: 1px gray;
padding: 4px;
padding-top: 7px;
}
</style>

So after applying style our accordion control is looking good by using the contrast of dark and light colors.

2. Set the index of pane

For this purpose we use SelectedIndex="0" property as by default it is set to 0 means the first pane is opened so let’s change and check what happened.

I have changed it to SelectedIndex="2" the output is:

As image describes that now the default on load of page the third tab is opened.

Now what happen to the accordion if we have set the index which is not as the number of panes?

So what is your opinion it gives any error of index out of range. No it couldn’t but it collapse all the collapsible pans that is no pane is opened by default.

3. Autosize

This property is to support for multiple type of layouts. It has three layout features.

a. None:

It is the default option and most flexible option and it supports with the content movement and as the pane extend or shrinks the content move with it.

AutoSize="None"

We have to set this property to none to use this.

Here you see this property in action

b. Limit

As the name suggests it will limit the behavior of showing content only specified by height property and the content could not move with the accordion pane as now the height of the accordion is set.

The rest of the content of the panes will show the scroll bar to show the content when Limit with height is specified.

You can see this in action.

c. Fill

By using this property, accordion will remain on same height as specified in the height of accordion.

The content shrunk or expand depend on height if not of same height it will show scroll.

See it in action below.

4. Fade Transitions

This property by default is set to true means it can have fade impact (low brightness)

In the accordion panes while collapsing or expanding. This is nice animation effect to be used while viewing content.

The property can be used by inserting following code.

FadeTransitions="true"

Let’s see it in the action

5. Transition Duration

As the name suggest that it can add duration to the transition effect like we have fade transition effect it can add transition duration to all panes. The more the duration the more slowly the pane can open with this effect.

The property can be used by adding line of code.

TransitionDuration="2000"

The time is in milliseconds.

See the example below:

6. Frames per second

These are the number of frames used per second in the transition effect.

This can be used by adding the numbers of frames with property FramesPerSecond="400"

7. Always one pane is open

By default at load time one tab is always open but this property is used to open it instead on clicking in the header pane, as when user click on header all panes are turned to be closed but in this case as the header click is now disabled and it kept open despite of clicking the head section of the pane.

The default property selection is true you can change as per your need.

RequireOpenedPane="true" code is used to set the property value.

See the example below for good understanding.

8. Suppress Header Postbacks

The default value is true and it has meaning that to suppress header from any client events. Like for example we have added an anchor tag in the header of the accordion pane then you expect that this is clickable and navigate to next anchor link when click event is called but this is not true it can suppress means disable anchor link which is means to link other document.

Let’s see it with example to understand it deeply.

As it is by default true let’s see what will happen.

We have use this line of code.

SuppressHeaderPostbacks="true"

Now let’s make it false see what will happen.

Asa you have seen that by setting to false it will now postback and redirect to another page which I have pointed to.

That’s the end of properties.

Despite this there are <Panes> which contain accordion panes and inside which we define our accordion panes like this one.

<ajaxToolkit:AccordionPane runat="server">
<Header><a href="About.aspx">Test Anchor Link</a> THis is 1st Header </Header>
<Content>THis is 1st Content <br />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 it’s Content. We keep track of the selected pane so it stays visible across postbacks. </Content>
</ajaxToolkit:AccordionPane>

This is the example of 1^st pane and rest of the following panes can be built like this which contains header for header text and content that contain the content against the header.

9. Data Source

Now let’s move to the last section of article which is binding accordion panes with some data source and see them in action how we can achieve this.

First of all Drag and drop SqlDataSource from Data Tab in the Toolbox to the designer view of the page and then Click the pointer arrow next to the control and click, it will extend it and select Configure Data Source it will open the Data Source Configuration Wizard which will guide you to create the connection string by connecting to the instance of the database.

Click on the New Connection button and enter server credentials to connect to the instance of the database.

After successful connection click OK button to proceed to the next step.

Now wizard will show do you want to save connection string to the configuration file if you select yes checkbox and give name to the connection string then it will save the connection string and name will be referenced in datasource.

If yes checkbox is not selected then it will add connection string in the Datasource as it is.

Now it open the Configure Select statement section. Where you can select the dbo objects from where you can get information to show.

There are two option in the page which says how would you like to retrieve data from your database?

1. Specify the custom SQL statement or stored prodedure

If you have selected this option and press Next > Button it will show you window to write custom SQL select statement.

You can write the custom sql statement as per you need and press Next it will show you step to test the sql query.

You can also use query Builder to build query by adding tables and select the columns and test the query to finalize the select query.

2. Specify columns from a table or view

In this option we will select firstly the table name and then columns you wish to show and then at last you can add WHERE Clause, can ORDER BY the data and Advance settings to generate the CRUD Operation scripts.

The final ready datasource object is

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:GamesConnectionString %>" SelectCommand="SELECT [CATEGORY_ID], [NAME] FROM [CATEGORIES]"></asp:SqlDataSource>

This Data Source contain the ID to be specified in the Ajax control toolkit accordion like this:

DataSourceID="SqlDataSource1"

Now next we need to Change in the Header and Content Template which has a purpose to be used only to bind from the data source.

<HeaderTemplate>Category ID: <%#DataBinder.Eval(Container.DataItem, "CATEGORY_ID")%></HeaderTemplate>
<ContentTemplate>Category Name: <%#DataBinder.Eval(Container.DataItem, "NAME")%></ContentTemplate>

This is the code which will bind data to header and content template section.

I am pasting here the complete code for better understanding.

<div class="row">
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:GamesConnectionString %>" SelectCommand="SELECT [CATEGORY_ID], [NAME] FROM [CATEGORIES]"></asp:SqlDataSource>
<div id="ajaxcontroltoolkitplaceholder">
<ajaxToolkit:Accordion ID="MyAccordion" runat="Server" SelectedIndex="0" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent" AutoSize="None" FadeTransitions="true" TransitionDuration="200" FramesPerSecond="400" RequireOpenedPane="true" SuppressHeaderPostbacks="false" DataSourceID="SqlDataSource1">
<HeaderTemplate>Category ID:
<%#DataBinder.Eval(Container.DataItem, "CATEGORY_ID")%>
</HeaderTemplate>
<ContentTemplate>Category Name:
<%#DataBinder.Eval(Container.DataItem, "NAME")%>
</ContentTemplate>
</ajaxToolkit:Accordion>
</div>
</div>