Wednesday, September 12, 2007

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


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" >

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

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

<table border="0" cellpadding="0" cellspacing="5" style="width:100%">

<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>



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);
dicCategories.Add(String.Format(C, i), objList);
Accordion1.DataSource = dicCategories;