Dynamic CollapsiblePanels

I was wondering if anyone has ever dynamically added CollapsiblePanels to a web form based on data from a database? Do I need to create a separate instance for each panel area I need or can I do it with one CollapsiblePanel control? Basically what I am looking to do is create something like the following:

TITLE1
>FIELD1
>FIELD2

TITLE2
>FIELD3
>FIELD4
>FIELD5

All data is being pulled from a database so, the fields are added to a Panel based on the title they are associated with. My workflow is currently to:

1) Query the database to get the information
2) Loop through the records to add controls to a new content panel
3) When all of the fields have been added to the contents panel, create a new CollapsiblePanel control and add it to the form
4) Loop until there aren't any more groups

This seems to kind of work but I continue to get an error stating that I have two or more controls with the same ID. I believe I have traced this to the adding of the multiple CollapsiblePanels. I am generating a random number to assign to the CollapsiblePanel every time one is generated but, the error still happens.

Any ideas what could be going on here?

I was in the same situation and came up with the following code. I hope it helps. I use Patterns and Practices (v3.0) so use your method of choice to obtain the data. I make use of a place holder to dump the controls so make sure you put one on your form and call it plcHolderForPanels for this example. Good luck :)

using System;
using System.Data;
using System.Configuration;
using System.Text;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Microsoft.Practices.EnterpriseLibrary.Data;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
string sql = "SELECT * FROM [topics]";

// Get the topics
IDataReader reader = DatabaseFactory.CreateDatabase().ExecuteReader(CommandType.Text, sql);

// Display the topics
while (reader.Read())
{
GeneratePanels(reader["id"].ToString(), reader["name"].ToString());
}
}
}

private void GeneratePanels(string topicId, string topicName)
{
// 1. Create hte panel for the title
Panel pnlTitle = new Panel();
pnlTitle.ID = @."pnlTitle" + topicId;
pnlTitle.CssClass = "collapsePanelHeader";

Image imgTitle = new Image();
imgTitle.ID = @."imgTitle" + topicId;
imgTitle.ImageUrl = @."images/expand.jpg";

Label lblTitle = new Label();
lblTitle.ID = @."lblTitle" + topicId;
lblTitle.Text = " -- Click here to expand...";

pnlTitle.Controls.Add(imgTitle);
pnlTitle.Controls.Add(new LiteralControl(topicName));
pnlTitle.Controls.Add(lblTitle);

// 2. Create the content panel
Panel pnlContent = new Panel();
pnlContent.ID = @."pnlContent" + topicId;
pnlContent.CssClass = @."collapsePanel";

pnlContent.Controls.Add(new LiteralControl("This is some text..."));

// 3. Now create the collapsible panel control
AjaxControlToolkit.CollapsiblePanelExtender cpe = new AjaxControlToolkit.CollapsiblePanelExtender();
cpe.ID = @."cp" + topicId;
cpe.TargetControlID = pnlContent.ID;
cpe.ExpandControlID = pnlTitle.ID;
cpe.CollapseControlID = pnlTitle.ID;
cpe.Collapsed = true;
cpe.TextLabelID = lblTitle.ID;
cpe.ImageControlID = imgTitle.ID;
cpe.CollapsedImage = "images/expand.jpg";
cpe.ExpandedImage = "images/collapse.jpg";
cpe.SuppressPostBack = true;

plcHolderForPanels.Controls.Add(cpe);
plcHolderForPanels.Controls.Add(pnlTitle);
plcHolderForPanels.Controls.Add(pnlContent);
plcHolderForPanels.Controls.Add(new LiteralControl("<BR><BR>"));
}
}