Wednesday, September 12, 2007

Nesting the Ajax Control Toolkit Accordion control and the ASP.NET Repeater control

Requirements


Install ASP.NET Ajax extensions 1.0.


The ASP.NET page


Create an ASP.NET Ajax web site (see ASP.NET Ajax extensions) and reference the Ajax Control Toolkit in your project.


Add the following statement at the top of your web page:


<%@ Import Namespace="System.Collections.Generic" %> 

Then insert the following code between the form tags of your web page.


<asp:ScriptManager ID="ScriptManager" runat="server" ></asp:ScriptManager>
<ajaxToolkit:Accordion ID="Accordion1" runat="server" SelectedIndex="0"
FadeTransitions="true" FramesPerSecond="40" TransitionDuration="250"
AutoSize="None" >
<Panes></Panes>

<HeaderTemplate>
<div style="color:white;background-color:blue;cursor:pointer;">
<%# ((KeyValuePair<String, List<File>>)(Container.DataItem)).Key %>
</div>
</HeaderTemplate>

<ContentTemplate>
<asp:repeater id="child" datasource='<%# (List<File>)(((KeyValuePair<String, List<File>>)(Container.DataItem)).Value) %>' runat="server">

<HeaderTemplate>
<table border="0" cellpadding="0" cellspacing="5" style="width:100%">
<thead><tr>
<th>Id</th><th>Name</th>
<th>Description</th>
<th>Date</th>
</tr></thead>
<tbody>
</HeaderTemplate>

<ItemTemplate>
<tr>
<td><%# ((File)(Container.DataItem)).id.ToString() %></td>
<td><%# ((File)(Container.DataItem)).Name %></td>
<td><%# ((File)(Container.DataItem)).Description %></td>
<td><%# ((File)(Container.DataItem)).Date.ToString() %></td>
</tr>
</ItemTemplate>

<FooterTemplate>
</tbody>
</table>
</FooterTemplate>

</asp:repeater>
</ContentTemplate>
</ajaxToolkit:Accordion>

The code-behind file


Add the following in the code-behind file of your web page


protected class File
{
public Guid id;
public string Name;
public string Description;
public DateTime Date;
public File()
{
id = Guid.NewGuid();
Date = DateTime.Now;
}
}

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
const string C = "Category {0}";
const string N = "File {0}";
const string D = "Description {0}";
Dictionary<String, List<File>> dicCategories = new Dictionary<String, List<File>>();
for (int i = 0; i < 5; i++)
{
List<File> objList = new List<File>();
for (int j = 0; j < 10; j++)
{
File objFile = new File();
objFile.Name = String.Format(N, j);
objFile.Description = String.Format(D, j);
objList.Add(objFile);
}
dicCategories.Add(String.Format(C, i), objList);
}
Accordion1.DataSource = dicCategories;
Accordion1.DataBind();
}
}