[CLOSED] Adding UserControl dynamically in code-behind

Page 1 of 3 123 LastLast
  1. #1

    [CLOSED] Adding UserControl dynamically in code-behind

    Hey,
    I read a few posts here and also on the net about ASP.NET in general, but cant figure out how to dynamically add UserControls in code-behind.

    I want to add my custom UserControl "CoreComment" to a Panel I have.

    This is what I tried:

    UserControls.CoreComment cc = new UserControls.CoreComment();
    cc._Comment = c;
    PanelComments.Controls.Add(cc);
    Here I see no controls rendered. I also tried to add "cc.RenderControl(...)" but I dont really know what or how to use/get a HtmlTextWriter or if that is the right way to go.

    Any help is appreciated =)
    Last edited by Daniil; May 17, 2011 at 10:49 PM. Reason: [CLOSED]
  2. #2
    Hi,

    You can add any Control to the .ContentControls Collection, or the <Content> inner property if configuring in markup.

    Example

    this.Panel1.ContentControls.Add(myUserControl);
    Hope this helps.
    Geoffrey McGill
    Founder
  3. #3
    Hey!

    Hmm, i cant get it to work. Its not rendering anything at all.

    So this is how I add the UserControl to a Panel (code-behind, in a Page):
    foreach(CoreCommons.System.Comment c in cg.Reply_Comments)
    {
        WebApplicationExtNetTest.Secure.UserControls.CoreComment cc = new UserControls.CoreComment();
        this.PanelComments.ContentControls.Add(cc);
    }
    And the Panel who should get the Controls:
    <ext:LayoutColumn ColumnWidth="0.40">
        <ext:Panel ID="PanelComments" runat="server" Layout="FormLayout" Padding="3" Title="Kommentarer" IconCls="message">
            <Content>
            </Content>
        </ext:Panel>
    </ext:LayoutColumn>
    Nothing is rendered though, and no errors can be seen either.

    The UserControl is a very simple one:

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="CoreComment.ascx.cs" Inherits="WebApplicationExtNetTest.Secure.UserControls.CoreComment" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <ext:Panel runat="server" ID="CoreCommentOuterPanel" BodyStyle="background: #FFFDDE">
        <Items>
            <ext:ColumnLayout runat="server">
                <Columns>
                    <ext:LayoutColumn ColumnWidth="0.8">
                        <ext:Image runat="server" ImageUrl="/Resources/bullet_triangle_green_16x16.png" Align="AbsMiddle"></ext:Image> 
                        <ext:Label runat="server" ID="lblCommentInfo" Text="test"></ext:Label>
                    </ext:LayoutColumn>
                    <ext:LayoutColumn ColumnWidth="0.2"><ext:Button runat="server" ID="btnDelete" Icon="Delete"></ext:Button></ext:LayoutColumn>
                </Columns>
            </ext:ColumnLayout>
            <ext:Label runat="server" ID="lblComment" Text="comment"></ext:Label>
        </Items>
    </ext:Panel>
  4. #4
    This is not correct:

    1. ColumnLayout is not a widget to use it like this.
    <ext:Panel ...>
        <Items>
            <ext:ColumnLayout runat="server">
                ...
            </ext:ColumnLayout>
            <ext:Label ...>
        </Items>
    </ext:Panel>


    and

    2. LayoutColumn expects a single widget.
    <ext:LayoutColumn ColumnWidth="0.8">   <ext:Image ...>
        <ext:Label ...>
    </ext:LayoutColumn>
    I would suggest you to get it work without a user control for the beginning.
  5. #5
    Ehm, are you saying that a <ext:ColumnLayout...> cannot be placed inside the <Items> of a Panel? But you can have ColumnLayout inside for example a ViewPort:

    <ext:Viewport ID="ViewPort1" runat="server">
            <Items>
                <ext:ColumnLayout ID="ColumnLayout1" runat="server" Split="true" FitHeight="true">
  6. #6
    Also, i dummed down my userControl even more, so it looks like this:
    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="CoreComment.ascx.cs" Inherits="WebApplicationExtNetTest.Secure.UserControls.CoreComment" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <ext:Panel runat="server" ID="CoreCommentOuterPanel" BodyStyle="background: #FFFDDE">
        <Items>
            
            <ext:Label runat="server" ID="lblComment" Text="comment"></ext:Label>
        </Items>
    </ext:Panel>
    And to dynamically add that Control doesnt work either. Im not really sure what Im doing wrong.

    Is the code-behind code cirrect? I do not n eed to call some form of "render"? I have seen that in other places, a call to .Render(). But there is no such method here, just .RenderControl(HtmlTextWriter)...
  7. #7
    Here is an example. Click the Button and the UserControl should be added? Not working here either.

    First the Page that should dynimcally load the UserControl:


    <%@ Page Language="C#" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>ToolTips - Ext.NET Examples</title>
    
        <script runat="server">
            protected void Page_Load(object sender, EventArgs e)
            {
            }
    
            [DirectMethod]
            public void asd()
            {
                WebApplicationExtNetTest.Secure.UserControls.CoreComment cc = new WebApplicationExtNetTest.Secure.UserControls.CoreComment();
                this.PanelComments.ContentControls.Add(cc);
            }
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
                
                <ext:Button runat="server" Text="ok">
                    <Listeners>
                        <Click Handler="Ext.net.DirectMethods.asd();" />
                    </Listeners>
                </ext:Button>
    
                <ext:Panel ID="PanelComments" runat="server" Layout="FormLayout" Padding="3" Title="Comments" IconCls="message">
                    <Content>
                    </Content>
                </ext:Panel>
        </form>
    </body>
    </html>
    And here is the UserControl:

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="CoreComment.ascx.cs" Inherits="WebApplicationExtNetTest.Secure.UserControls.CoreComment" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <ext:Panel runat="server" ID="CoreCommentOuterPanel" BodyStyle="background: #FFFDDE">
        <Items>
            
            <ext:Label runat="server" ID="lblComment" Text="comment"></ext:Label>
        </Items>
    </ext:Panel>
    The UserControl code-behind:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace WebApplicationExtNetTest.Secure.UserControls
    {
        public partial class CoreComment : System.Web.UI.UserControl
        {
            protected void Page_Load(object sender, EventArgs e)
            {
            }
        }
    }
  8. #8
    Quote Originally Posted by wagger View Post
    Ehm, are you saying that a <ext:ColumnLayout...> cannot be placed inside the <Items> of a Panel?
    No, I meant <ext:Label> here:
    <ext:Panel ...>
        <Items>
            <ext:ColumnLayout runat="server">
                ...
            </ext:ColumnLayout>
            <ext:Label ...>
        </Items>
    </ext:Panel>
    In other words, any layout control should be a single top level 'item', and it's not really an item, not in .items collection.

    Regarding the sample you posted. During DirectEvent/DirectMethod you should also call .UpdateContent() for the container together with placing a control into the .ContentControls() collection.
  9. #9
    Hey
    I tried to add the UpdateContent like below, but that didnt work - nothing happens.

            [DirectMethod]
            public void asd()
            {
                WebApplicationExtNetTest.Secure.UserControls.CoreComment cc = new WebApplicationExtNetTest.Secure.UserControls.CoreComment();
                this.PanelComments.ContentControls.Add(cc);
                this.PanelComments.UpdateContent();
                
            }
  10. #10
    Can you see the user control's content if you apply these actions in Page-Load?
    ebApplicationExtNetTest.Secure.UserControls.CoreComment cc = new WebApplicationExtNetTest.Secure.UserControls.CoreComment();
    this.PanelComments.ContentControls.Add(cc);
    Just I can't test it right now myself, I assume that there is wrong layout.

    Layout="FormLayout" of the panelCommens doesn't make sense. Please wrap the user control's content in <ext:FormLayout> instead.

    By the way, here is the working sample with .UpdateContent().
    https://examples1.ext.net/#/XRender/...UpdateContent/
    Last edited by Daniil; May 15, 2011 at 2:13 PM.
Page 1 of 3 123 LastLast

Similar Threads

  1. Replies: 14
    Last Post: Nov 16, 2012, 11:01 AM
  2. [CLOSED] Managing events from a dynamically loaded UserControl
    By egvt in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Feb 20, 2012, 5:49 PM
  3. Replies: 4
    Last Post: Jul 07, 2011, 1:40 PM
  4. Replies: 2
    Last Post: Oct 04, 2010, 8:36 AM
  5. Replies: 3
    Last Post: Mar 30, 2010, 2:03 PM

Tags for this Thread

Posting Permissions