Dynamically add controls to update panel

Question

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 13-Feb-13 21:51pm

wonder-FOOL

Updated 13-Feb-13 22:05pm

v3

Add a Solution

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

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

_Amy · Accepted Answer · 2013-02-14T18:15:00

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