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>"));
}
}

DropShadowExtender and target panel separate when window is resized

So here's what's up.

I've got a horizontally scrolling asp panel.

In the panel is a datalist which repeats horizontally.

I have a web user control set as the item template. The user control makes use of the DropShadowExtender.

It works beautifully, until the window is resized, then the shadows and user controls part their ways.

Any ideas?

hello?

DropDownLists in 2 separate updatepanels only work once, then dont.

Hey, i have 2 dropdownlists, both databound to my sql server, the first one simply selects anything from the "catagories" database. Autopostback is enabled. The next one is a select to the subcatagories database, with an inner join to catagories on the catagory_id column..

The idea here was to make an ajax enabled cascading databound dropdownlist, and it DOES work... but only once. i tried making the trigger the indexChanged event of the 1st dropdown list, but i have the same results. If i change catagories more than once, i will not get a subcatagory change..

Any ideas?

So not sure why DropDownList1 is in an UpdatePanel, but DropDownList2 is the issue here eh and is in a panel, and has a dependant control, being the first drop down list.

So the second one, add a Trigger like this;

<asp:AsyncPostbackTriggerControlID="DropDownList1"EventName="SelectedIndexChanged"/>

Is that any help? Post a snippet of your page here.

Cheers,

Steve

You should use the Cascading Dropdown of Ajax Control Toolkit, it is specially developed for this purpose. Checkout the live demo of it:
http://www.asp.net/AJAX/Control-Toolkit/Live/CascadingDropDown/CascadingDropDown.aspx

It says AsyncPostbackTrigger was a unknown element... Here's my code:

Catagory:<BR /><asp:DropDownList id="DropDownList1" runat="server" DataValueField="Catagory_ID" DataTextField="Catagory" DataSourceID="SqlDataSource2" AutoPostBack="True"></asp:DropDownList><asp:UpdatePanel id="UpdatePanel1" runat="server" >
 <contenttemplate>
SubCatagory:<BR /><asp:DropDownList id="ddlSubCat" runat="server" DataValueField="SubCatagory_ID" DataTextField="SubCatagory" DataSourceID="ddlsubCatagory"></asp:DropDownList>

<asp:SqlDataSource id="SqlDataSource2" runat="server" SelectCommand="SELECT [Catagory], [Catagory_ID] FROM [db_Catagories]" ConnectionString="<%$ ConnectionStrings:floofieConnectionString %>"></asp:SqlDataSource><BR /><asp:SqlDataSource id="ddlsubCatagory" runat="server" SelectCommand="SELECT db_SubCatagories.SubCatagory, db_SubCatagories.SubCatagory_ID FROM db_Catagories INNER JOIN db_SubCatagories ON db_Catagories.Catagory_ID = db_SubCatagories.Catagory_ID WHERE (db_Catagories.Catagory_ID = @.catid)" ConnectionString="<%$ ConnectionStrings:floofieConnectionString %>"><SelectParameters>

<asp:ControlParameter PropertyName="SelectedValue" Name="catid" ControlID="DropDownList1"></asp:ControlParameter>
</SelectParameters>
</asp:SqlDataSource>
</contenttemplate>

KaziManzurRashid:

You should use the Cascading Dropdown of Ajax Control Toolkit, it is specially developed for this purpose. Checkout the live demo of it:
http://www.asp.net/AJAX/Control-Toolkit/Live/CascadingDropDown/CascadingDropDown.aspx

That looks really nice, is there any way of getting the web service code for vb.net?

Can you post the complete markup of UpdatePanel. If any of your dropdown is outsite the update panel set its AutoPostback=true and create AsyncPostbackTrigger in Update Panel which points to that dropdownlist.

KaziManzurRashid:

Can you post the complete markup of UpdatePanel. If any of your dropdown is outsite the update panel set its AutoPostback=true and create AsyncPostbackTrigger in Update Panel which points to that dropdownlist.

Sorry bout that, thought i had it all.

Catagory:<BR /><asp:DropDownList id="DropDownList1" runat="server" DataValueField="Catagory_ID" DataTextField="Catagory" DataSourceID="SqlDataSource2" AutoPostBack="True"></asp:DropDownList><asp:UpdatePanel id="UpdatePanel1" runat="server"> <contenttemplate>SubCatagory:<BR /><asp:DropDownList id="ddlSubCat" runat="server" DataValueField="SubCatagory_ID" DataTextField="SubCatagory" DataSourceID="ddlsubCatagory"></asp:DropDownList> <BR /><asp:SqlDataSource id="SqlDataSource2" runat="server" SelectCommand="SELECT [Catagory], [Catagory_ID] FROM [db_Catagories]" ConnectionString="<%$ ConnectionStrings:floofieConnectionString%>"></asp:SqlDataSource><BR /><asp:SqlDataSource id="ddlsubCatagory" runat="server" SelectCommand="SELECT db_SubCatagories.SubCatagory, db_SubCatagories.SubCatagory_ID FROM db_Catagories INNER JOIN db_SubCatagories ON db_Catagories.Catagory_ID = db_SubCatagories.Catagory_ID WHERE (db_Catagories.Catagory_ID = @.catid)" ConnectionString="<%$ ConnectionStrings:floofieConnectionString%>"><SelectParameters><asp:ControlParameter PropertyName="SelectedValue" Name="catid" ControlID="DropDownList1"></asp:ControlParameter></SelectParameters></asp:SqlDataSource></contenttemplate> <triggers><asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged"></asp:AsyncPostBackTrigger></triggers> </asp:UpdatePanel>

I acctually fixed it... the problem was, there was 3 other updatepanels, and they all need to be set to conditional.

I cant beleive i didnt see that in the first place.