This sample shows how to bind data to an AJAX Accordian control, using the AJAX Control Toolkit. The first thing you will need to do, is to download it from the AJax.ASP.Net website.
Then, once it’s downloaded and installed, go to the Bin folder, where it’s located, find the AjaxcontrolToolkit.dll and copy it to the Bin folder of your website.
Once it’s there, you’re off to the races. Note the ‘Register’ statement at the top of the code here, and then, look at the different properties in the control itself. When databinding the Accordian control, you will use the HeaderTemplate and ContentTemplate tags, instead of the normal Header and Content pane tags.
Add a little CSS for flavor (see the ContentCssClass property of the Accordian control, and the DIV class for the header), and we’re good to go.
<%@ Page Language="VB" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<html>
<head>
<meta name="GENERATOR" Content="ASP Express 5.0">
<title>Databound Accordian Control</title>
<style type="text/css">
<!--
.collapsePanel
{
height:0px;
background-color:#FAFAD2;
overflow:hidden;
border-left:dotted 1px Silver;
padding:5px;
padding-top:10px;
border-right:2px solid silver;
border-bottom:2px solid silver;
z-index:0;
}
.collapsePanelHeader
{
border-right:2px solid silver;
border-bottom:2px solid silver;
color:white;
background-color:#6687BD;
overflow:hidden;
font-weight:bold;
cursor:pointer;
margin-top:5px;
padding:5px;
}
-->
</style>
</head>
<body>
<form id="form1" Runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="
<%$ ConnectionStrings:myConnectionString %>"
SelectCommand="SELECT [Field1], [Field2] FROM [MyTable]">
</asp:SqlDataSource>
<table width="100%">
<tr>
<td align="left">
<cc1:Accordion ID="Accordion2"
ContentCssClass="collapsePanel"
runat="server" SelectedIndex="0"
DataSourceID="SqlDataSource1">
<HeaderTemplate>
<table>
<tr>
<td>
<div class="collapsePanelHeader">
<asp:Label ID="TitleLabel" runat="server"
Text=''<%# Eval("Title") %>''>
</asp:Label>
</div>
</td>
</tr>
</table>
</HeaderTemplate>
<ContentTemplate>
<asp:Label ID="TipLabel" runat="server"
Text=''<%# Eval("Tip") %>''>
</asp:Label>
<br />
</ContentTemplate>
</cc1:Accordion>
</td>
</tr>
</table>
</form>
</body>
</html>