Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: C# ASP.NET Ajax
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:
<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.
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 22:51pm
Edited 13-Feb-13 23:05pm
v3
Comments
richcb at 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 at 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

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

You need to take a place holder in your update panel. Try this:
HTML:
<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:
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("
"));
  PlaceHolder1.Controls.Add(pnlReq);
  PlaceHolder1.Controls.Add(new LiteralControl("
"));
}
count = upRequirement.ContentTemplateContainer.Controls.Count;
 

--Amit
  Permalink  
Comments
wonder-FOOL at 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)

  Print Answers RSS
0 OriginalGriff 299
1 Maciej Los 295
2 Sergey Alexandrovich Kryukov 205
3 Aajmot Sk 202
4 Sinisa Hajnal 166
0 OriginalGriff 7,760
1 Sergey Alexandrovich Kryukov 7,072
2 DamithSL 5,604
3 Manas Bhardwaj 4,986
4 Maciej Los 4,785


Advertise | Privacy | Mobile
Web04 | 2.8.1411023.1 | Last Updated 15 Feb 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100