Click here to Skip to main content
15,922,315 members
Please Sign up or sign in to vote.
4.00/5 (1 vote)
See more:
Hello all,

I want to add controls dynamically to a update panel, they are getting added but they are not getting displayed. Below is my code details.

The designer:
C#
<asp:UpdatePanel ID="upRequirement" runat="server" UpdateMode="Always">
   <ContentTemplate>
      <asp:Button ID="btnAdd" runat="server" Text="+" CssClass="button" OnClick="btnAdd_Click" />
   </ContentTemplate>
   <Triggers>
      <asp:AsyncPostBackTrigger ControlID="btnAddRequirement" />
   </Triggers>
</asp:UpdatePanel>


Codebehind:
I also tried moving the code to Page_OnInit method but still no luck.
This code is inside the Page_Load method.
C#
int count = upRequirement.ContentTemplateContainer.Controls.Count;
foreach(Requirement req in Req)
{
  Panel pnlReq = new Panel();
  pnlReq.ID = "pnl" + req.Id;
  pnlReq.Width = Unit.Percentage(100);
  pnlReq.Visible = true;
  Label lblReq = new Label();
  lblReq.ID = "lbl" + req.Id;
  lblReq.Text = req.Content;
  lblReq.Visible = true;
  Image imgReq = new Image();
  imgReq.ID = "img" + req.Id;
  CollapsiblePanelExtender pnlExtReq = new CollapsiblePanelExtender();
  pnlExtReq.ID = "pnlExt" + req.Id;
  pnlExtReq.TargetControlID = pnlReq.ID;
  pnlExtReq.CollapsedSize = 0;
  pnlExtReq.ExpandedSize = 300;
  pnlExtReq.Collapsed = true;
  pnlExtReq.AutoCollapse = false;
  pnlExtReq.AutoExpand = false;
  pnlExtReq.ScrollContents = true;
  pnlExtReq.CollapsedText = "Show details...";
  pnlExtReq.ExpandedText = "Hide details...";
  pnlExtReq.ImageControlID = imgReq.ID;
  pnlExtReq.ExpandedImage = "~/Images/Col1.jpeg";
  pnlExtReq.CollapsedImage = "~/Images/Exp1.jpeg";
  pnlExtReq.ExpandDirection = CollapsiblePanelExpandDirection.Vertical;
  pnlReq.Controls.Add(pnlExtReq);
  upRequirement.ContentTemplateContainer.Controls.Add(pnlReq);
  upRequirement.ContentTemplateContainer.Controls.Add(new LiteralControl("<br />"));
}
count = upRequirement.ContentTemplateContainer.Controls.Count;


As you can see I test the number of controls in the variable count. The count is getting increased after the loop but when the page loads controls are not visible. What is the problem can someone help me find it? Thanks in advance.
Posted
Updated 13-Feb-13 22:05pm
v3
Comments
Richard C Bishop 14-Feb-13 10:10am    
You are setting the Collapsed property of pnlExtReq to true, wouldn't that essentially hide all the contents in it?
rlloyd2001 14-Feb-13 18:53pm    
Found a related link.
http://stackoverflow.com/questions/553073/adding-controls-dynamically-to-an-updatepanel-in-asp-net-ajax

1 solution

You need to take a place holder in your update panel. Try this:
HTML:
ASP.NET
<asp:updatepanel id="upRequirement" runat="server" updatemode="Always" xmlns:asp="#unknown">
   <contenttemplate>
      <asp:placeholder id="PlaceHolder1" runat="server">
      </asp:placeholder>
      <asp:button id="btnAdd" runat="server" text="+" cssclass="button" onclick="btnAdd_Click" />
   </contenttemplate>
   <triggers>
      <asp:asyncpostbacktrigger controlid="btnAddRequirement" />
   </triggers>
</asp:updatepanel>

Code Behind(C#) -- PreInIt Event:
C#
int count = upRequirement.ContentTemplateContainer.Controls.Count;
foreach(Requirement req in Req)
{
  Panel pnlReq = new Panel();
  pnlReq.ID = "pnl" + req.Id;
  pnlReq.Width = Unit.Percentage(100);
  pnlReq.Visible = true;
  Label lblReq = new Label();
  lblReq.ID = "lbl" + req.Id;
  lblReq.Text = req.Content;
  lblReq.Visible = true;
  Image imgReq = new Image();
  imgReq.ID = "img" + req.Id;
  CollapsiblePanelExtender pnlExtReq = new CollapsiblePanelExtender();
  pnlExtReq.ID = "pnlExt" + req.Id;
  pnlExtReq.TargetControlID = pnlReq.ID;
  pnlExtReq.CollapsedSize = 0;
  pnlExtReq.ExpandedSize = 300;
  pnlExtReq.Collapsed = true;
  pnlExtReq.AutoCollapse = false;
  pnlExtReq.AutoExpand = false;
  pnlExtReq.ScrollContents = true;
  pnlExtReq.CollapsedText = "Show details...";
  pnlExtReq.ExpandedText = "Hide details...";
  pnlExtReq.ImageControlID = imgReq.ID;
  pnlExtReq.ExpandedImage = "~/Images/Col1.jpeg";
  pnlExtReq.CollapsedImage = "~/Images/Exp1.jpeg";
  pnlExtReq.ExpandDirection = CollapsiblePanelExpandDirection.Vertical;
  pnlReq.Controls.Add(pnlExtReq);
  upRequirement.ContentTemplateContainer.Controls.Add(pnlReq);
  upRequirement.ContentTemplateContainer.Controls.Add(new LiteralControl("<br />"));
  PlaceHolder1.Controls.Add(pnlReq);
  PlaceHolder1.Controls.Add(new LiteralControl("<br />"));
}
count = upRequirement.ContentTemplateContainer.Controls.Count;



--Amit
 
Share this answer
 
Comments
wonder-FOOL 22-Mar-13 5:45am    
Thanks. A bit delayed but rewarded :)

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900