I'd like to know how to create a CollapsablePanel in code-behind. My goal is to fetch records from a SQL 05 DB, and create a panel for each record/row in the dataset. I don't know how many rows I'll have, if any, and this means I need to do it on the back end, not in the XHTML code.
Hi,
I made the following sample according to your requirements, please try it:
<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> protected void Page_Load(object sender, EventArgs e) { int numberOfRecordsToBeShown = 10; // this value can be determined by the number of rows in database for (int i = 0; i < numberOfRecordsToBeShown; i++) { Panel pnl = new Panel(); Label lblContent = new Label(); LinkButton lbHeader = new LinkButton(); PlaceHolder1.Controls.Add(lbHeader); PlaceHolder1.Controls.Add(pnl); pnl.Controls.Add(lblContent); lbHeader.ID = "Header" + i.ToString(); lbHeader.Text = "Header" + i.ToString(); pnl.ID = "Row" + i.ToString(); lblContent.Text = "Content to be shown"; AjaxControlToolkit.CollapsiblePanelExtender cpe = new AjaxControlToolkit.CollapsiblePanelExtender(); cpe.ID = "Extender" + i.ToString(); cpe.SuppressPostBack = true; cpe.CollapseControlID = lbHeader.ID; cpe.ExpandControlID = lbHeader.ID; cpe.TargetControlID = pnl.ID; PlaceHolder1.Controls.Add(cpe); } }</script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> </div> <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder> </form></body></html> Hope this helps.I gave it a go, but all I get is 10 lines of 'Content to be shown' on my screen. No collapsing/expanding... nothing, really, except 10 lines of text.
ok, with a few slight alterations, I wound up with this:
protected void Page_Load(object sender, EventArgs e) {
SpewOutCollapses();
}
public void SpewOutCollapses() {
int numberOfRecordsToBeShown = 5; // this value can be determined by the number of rows in database
for (int i = 0; i < numberOfRecordsToBeShown; i++) {
AjaxControlToolkit.CollapsiblePanelExtender cpe = new AjaxControlToolkit.CollapsiblePanelExtender();
StringBuilder sBuild = new StringBuilder();
Panel pnlContainer = new Panel();
Panel pnlHeaderGoal1Update = new Panel();
Label lblContent = new Label();
LinkButton lbHeader = new LinkButton();
PlaceHolder1.Controls.Add(lbHeader);
PlaceHolder1.Controls.Add(pnlContainer);
pnlContainer.Controls.Add(pnlHeaderGoal1Update);
pnlHeaderGoal1Update.Controls.Add(lblContent);
pnlContainer.ID = "pnlContainer" + i.ToString();
pnlContainer.Style.Add("background", "#DFDFDF");
lbHeader.ID = "Header" + i.ToString();
sBuild.Append(" <table class=\"clsOneHundredPercentWide clsBGGreyA clsCursorPointer txtWhiteBold\" style=\"height: 25px;\">");
sBuild.Append(" <tr>");
sBuild.Append(" <td class=\"clsTwoByFivePadding cls25pxHigh clsBold clsLeftAlign\" style=\"width: 15%\">ID " + i.ToString() + "</td>");
sBuild.Append(" <td class=\"clsTwoByFivePadding cls25pxHigh clsLeftAlign\" style=\"width: 85%\">(Show Details...)</td>");
sBuild.Append(" </tr>");
sBuild.Append(" </table>");
lbHeader.Text = sBuild.ToString();
pnlHeaderGoal1Update.ID = "pnlHeaderGoal1Update" + i.ToString();
lblContent.Text = "<div class=\"clsTwoByFivePadding clsLeftAlign\" style=\"padding-right: 10px;\">";
lblContent.Text += " <p>Quisque felis lacus, sodales in, commodo ut, pellentesque sed, orci. Pellentesque congue nisi sed enim. Quisque congue sodales sapien. Suspendisse et lorem ut erat dignissim vestibulum. In hac habitasse platea dictumst. Sed nisl neque, convallis eu, sagittis dignissim, molestie eu, odio. Fusce quam orci, vehicula sollicitudin, tincidunt sed, lobortis dignissim, lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed interdum tincidunt mi. Vivamus blandit molestie lectus. Praesent sem lacus, tincidunt nec, placerat ac, feugiat non, tortor. Donec eu pede in neque viverra iaculis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer interdum augue quis risus. Pellentesque malesuada elit et eros. In ipsum. Pellentesque eget diam. Aenean quis lorem. Cras et dolor at urna pharetra nonummy. Sed posuere, risus eget suscipit lacinia, ipsum nulla adipiscing sapien, vitae aliquet lacus arcu blandit neque.</p>";
lblContent.Text += "</div>";
cpe.ID = "Extender" + i.ToString();
cpe.SuppressPostBack = true;
cpe.CollapseControlID = lbHeader.ID;
cpe.ExpandControlID = lbHeader.ID;
cpe.TargetControlID = pnlHeaderGoal1Update.ID;
PlaceHolder1.Controls.Add(cpe);
}
}
It works great, but that brings me to part 2 of my question: Is there a way to generate SUB collapsers in this... to in effect nest collapsing panels in collapsing panels. I can hard-code that, but I would love to generate it. What I want is, inside the existing panel generation, to generate a single collapsablePanel (so that each collapser has one nested collapser inside). Think that's possible?
Ok, let's forget the nesting for the moment, and think instead about something else: can you explain, possibly, why the panels start fully expanded?
Morydyn:
Ok, let's forget the nesting for the moment, and think instead about something else: can you explain, possibly, why the panels start fully expanded?
By default, the initial state is expanded. You can change it to collapsed explicitly.
cpe.ID = "Extender" + i.ToString();
cpe.Collapsed = true;
cpe.SuppressPostBack = true;
