[CLOSED] [1.0] Loading User Controls in runtime

  1. #1

    [CLOSED] [1.0] Loading User Controls in runtime

    Hi All,

    My Question is about Loading user controls via DirectMethod.

    I have the following scenario:
    According to some database information, I have to Load a User Control based on the count of records I am getting.
    So, in order to achieve this, here is the complete process flow:

    The User Control markup looks like the following:
    <ext:FormPanel runat="server" ID="pnl1" >
        .... some controls 
    </ext:FormPanel>
    The Page Markup looks like this:
    <body>
    ..
     <ext:Panel runat="server" id="pnlContainer"> </ext:Panel>
    ..
    </body>

    1- I Exposed the FormPanel inside the user control as a public read only property:
    public readonly FormPanel RootPanel {
         get { return this.pnl1; }
    }
    Inside my Page
    2- I declared a private member as a reference for my control.

    2- During Page Initialization I used
        myUserControl = (myUserControl)Page.LoadControl(..ascx);
        myUserControl.Id = "someid";
    3-Inside the DirectMethod i am calling the
        myUserControl.RootPanel.Render(this.pnlContainer);
    Up to this stage, every thing is working great.

    But when I repeat rendering process several times as follow:
        myUserControl.RootPanel.Render(this.pnlContainer);
        Instance2OfMyUserControl.RootPanel.Render(this.pnlContainer);
    I am getting this error from the server
    A Control with an ID of pnl1 has already been initialized. Please ensure that all Controls have a unique id.

    I've tried setting IDMode="Legacy" if this what it means on the resource manager. but I am still stuck.

    Thanks for your help.
  2. #2

    RE: [CLOSED] [1.0] Loading User Controls in runtime

    Hi,

    1. I am really confused by your scheme. You use user control but render FormPanel only. It is really strange. In my opinion it is bad design. It is better create custom control (extension from FormPanel). Please see
    https://examples1.ext.net/#/Combinat.../Simple_Tasks/

    In that example we use custom controls which inherited from the standard controls

    2. When you call
    myUserControl.RootPanel.Render(this.pnlContainer);
    'myUserControl.RootPanel' is added to the this.pnlContainer.Controls collection. It is mean that 'myUserControl.RootPanel' is outside user control now (INamingContainer is changed, now it is the current page because pnlContainer in the page) and must have unique id within the page. But you use 'pnl1' for both instances

    Solutions:

    - better variant. Load user controls to the pnlContainer and update panel content
    <%@ 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></title>
        
        <script runat="server">
            protected void RenderClick(object sender, DirectEventArgs e)
            {
                Ext.Net.Sandbox.AjaxEvents.MyUserControl ctl1 = (Ext.Net.Sandbox.AjaxEvents.MyUserControl)Page.LoadControl("MyUserControl.ascx");
                ctl1.ID = "someid1";
    
                Ext.Net.Sandbox.AjaxEvents.MyUserControl ctl2 = (Ext.Net.Sandbox.AjaxEvents.MyUserControl)Page.LoadControl("MyUserControl.ascx");
                ctl2.ID = "someid2";     
                this.pnlContainer.ContentControls.Add(ctl1);
                this.pnlContainer.ContentControls.Add(ctl2);
                this.pnlContainer.UpdateContent();
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" />
            
            <ext:Panel runat="server" id="pnlContainer">
            </ext:Panel>
            
            <ext:Button runat="server" Text="Render">
                <DirectEvents>
                    <Click OnEvent="RenderClick" />
                </DirectEvents>
            </ext:Button>
        </form>
    </body>
    </html>
    - another solution. If you still want to render RootPanel only instead whole user control then you need to change RootPanel id (set unique ID)
    <%@ 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></title>
        
        <script runat="server">
            protected void RenderClick(object sender, DirectEventArgs e)
            {
                Ext.Net.Sandbox.AjaxEvents.MyUserControl ctl1 = (Ext.Net.Sandbox.AjaxEvents.MyUserControl)Page.LoadControl("MyUserControl.ascx");
                ctl1.RootPanel.ID = "someid1";
    
                Ext.Net.Sandbox.AjaxEvents.MyUserControl ctl2 = (Ext.Net.Sandbox.AjaxEvents.MyUserControl)Page.LoadControl("MyUserControl.ascx");
                ctl2.RootPanel.ID = "someid2";     
                this.pnlContainer.Items.Add(ctl1.RootPanel);
                this.pnlContainer.Items.Add(ctl2.RootPanel);
                ctl1.RootPanel.Render();
                ctl2.RootPanel.Render();
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" />
            
            <ext:Panel runat="server" id="pnlContainer">
            </ext:Panel>
            
            <ext:Button runat="server" Text="Render">
                <DirectEvents>
                    <Click OnEvent="RenderClick" />
                </DirectEvents>
            </ext:Button>
        </form>
    </body>
    </html>
  3. #3

    RE: [CLOSED] [1.0] Loading User Controls in runtime

    Well,
    Thanks vladimir,
    It worked fine with pnlContainer.UpdateContents(); it will temporary fix my issue.

    Concerning the design my FormPanel [RootPanel] contains over than 25 child controls, which will be very lengthy to write them in runtime when subclassing the FormPanel, thus I thought about user control, specially I have to repeat this user control base on the record count I am getting from db as I mentioned above so if you have a good example or reference for such scenario, it would be great. we used to have a repeater control in normal asp controls, do u have one like this ?

    Concerning the INameingContainer, when I set IDMode = Legacy on the FormPanel [RootPanel] not on ResourceManager of the entire page, it correctly generate ids, but It give me another javascript error
    new Ext.form.FormPanel({
      id: "1_pnl1",
      xtype: "form",
      items: [
        {
      id: "1_Container9",
      xtype: "container",
      height: 25,
      items: [
        {
      id: "1_Container10",
      xtype: "container",
      columnWidth: 0.5,
      labelWidth: 150,
      items: {
      id: "1_NumberField4",
      xtype: "numberfield",
      anchor: "95%",
      disabled: true,
      fieldLabel: "Code",
      dataIndex: "company",
      autoCreate: {"tag":"input","type":"text","maxlength":50,"autocomplete":"off"},
      maxLength: 50
    },
      layout: "form"
    },
        {
      id: "1_Container11",
      xtype: "container",
      columnWidth: 0.5,
      labelWidth: 150,
      items: {
      id: "1_TextField28",
      xtype: "textfield",
      anchor: "95%",
      disabled: true,
      fieldLabel: "Name",
      dataIndex: "period",
      autoCreate: {"tag":"input","type":"text","maxlength":50,"autocomplete":"off"},
      maxLength: 50
    },
      layout: "form"
    }
      ],
      layout: "netcolumn"
    },
        {
      id: "1_fsVehicleSummary",
      xtype: "fieldset",
      autoHeight: true,
      items: {
      id: "1_Container3",
      xtype: "container",
      height: 50,
      items: [
        {
      id: "1_Container15",
      xtype: "container",
      columnWidth: 0.1,
      labelWidth: 150,
      items: {
      id: "1_Image1",
      xtype: "netimage",
      hideLabel: true,
      imageUrl: "/WebClouders.Media.UserServices/Images/DesktopIcons/advancedsettings.png"
    },
      layout: "form"
    },
        {
      id: "1_Container7",
      xtype: "container",
      columnWidth: 0.45,
      labelWidth: 150,
      items: [
        {
      id: "1_NumberField3",
      xtype: "numberfield",
      anchor: "95%",
      disabled: true,
      fieldLabel: "Type",
      dataIndex: "company",
      autoCreate: {"tag":"input","type":"text","maxlength":50,"autocomplete":"off"},
      maxLength: 50
    },
        {
      id: "1_TextField13",
      xtype: "textfield",
      anchor: "95%",
      disabled: true,
      fieldLabel: "Currency",
      dataIndex: "jobNo"
    }
      ],
      layout: "form"
    },
        {
      id: "1_Container8",
      xtype: "container",
      columnWidth: 0.45,
      labelWidth: 150,
      items: [
        {
      id: "1_TextField14",
      xtype: "textfield",
      anchor: "95%",
      disabled: true,
      fieldLabel: "Market",
      dataIndex: "period",
      autoCreate: {"tag":"input","type":"text","maxlength":50,"autocomplete":"off"},
      maxLength: 50
    },
        {
      id: "1_TextField26",
      xtype: "textfield",
      anchor: "95%",
      disabled: true,
      fieldLabel: "Supplier",
      dataIndex: "period",
      autoCreate: {"tag":"input","type":"text","maxlength":50,"autocomplete":"off"},
      maxLength: 50
    }
      ],
      layout: "form"
    }
      ],
      layout: "netcolumn"
    },
      layout: "auto",
      iconCls: "icon-applicationosxdouble",
      title: "Sports Online Edition",
      checkboxToggle: true
    },
        {
      id: "1_FieldSet1",
      xtype: "fieldset",
      autoHeight: true,
      items: [
        {
      id: "1_Container12",
      xtype: "container",
      height: 50,
      items: [
        {
      id: "1_Container13",
      xtype: "container",
      columnWidth: 0.5,
      labelWidth: 150,
      items: [
        {
      id: "1_NumberField5",
      xtype: "numberfield",
      anchor: "95%",
      disabled: true,
      fieldLabel: "Specification",
      dataIndex: "company",
      autoCreate: {"tag":"input","type":"text","maxlength":50,"autocomplete":"off"},
      maxLength: 50
    },
        {
      id: "1_TextField27",
      xtype: "textfield",
      anchor: "95%",
      disabled: true,
      fieldLabel: "Dates",
      dataIndex: "jobNo"
    }
      ],
      layout: "form"
    },
        {
      id: "1_Container14",
      xtype: "container",
      columnWidth: 0.5,
      labelWidth: 150,
      items: [
        {
      id: "1_TextField29",
      xtype: "textfield",
      anchor: "95%",
      disabled: true,
      fieldLabel: "Free",
      dataIndex: "period",
      autoCreate: {"tag":"input","type":"text","maxlength":50,"autocomplete":"off"},
      maxLength: 50
    },
        {
      id: "1_TextField30",
      xtype: "textfield",
      anchor: "95%",
      disabled: true,
      fieldLabel: "Booked Order Number",
      dataIndex: "period",
      autoCreate: {"tag":"input","type":"text","maxlength":50,"autocomplete":"off"},
      maxLength: 50
    }
      ],
      layout: "form"
    }
      ],
      layout: "netcolumn"
    },
        {
      id: "1_ss",
      height: 65,
      items: [
        {
      id: "1_Labexxl1",
      xtype: "label",
      columnWidth: 0.073,
      fieldLabel: ". ",
      text: "Bill"
    },
        {
      id: "1_txtL",
      xtype: "textfield",
      columnWidth: 0.083,
      fieldLabel: "Gross Unit"
    },
        {
      id: "1_TextField3",
      xtype: "textfield",
      columnWidth: 0.083,
      fieldLabel: "Loading"
    },
        {
      id: "1_TextField4",
      xtype: "textfield",
      columnWidth: 0.083,
      fieldLabel: "Discount"
    },
        {
      id: "1_TextField5",
      xtype: "textfield",
      columnWidth: 0.083,
      fieldLabel: "Comm"
    },
        {
      id: "1_TextField6",
      xtype: "textfield",
      columnWidth: 0.083,
      fieldLabel: "Fees"
    },
        {
      id: "1_TextField7",
      xtype: "textfield",
      columnWidth: 0.083,
      fieldLabel: "Taxes"
    },
        {
      id: "1_TextField8",
      xtype: "textfield",
      columnWidth: 0.083,
      fieldLabel: "Other"
    },
        {
      id: "1_TextField9",
      xtype: "textfield",
      columnWidth: 0.083,
      fieldLabel: "Net Unit"
    },
        {
      id: "1_TextField10",
      xtype: "textfield",
      columnWidth: 0.083,
      fieldLabel: "Ads Number"
    },
        {
      id: "1_TextField11",
      xtype: "textfield",
      columnWidth: 0.083,
      fieldLabel: "Cur Amnt"
    },
        {
      id: "1_TextField12",
      xtype: "textfield",
      columnWidth: 0.083,
      fieldLabel: "Inv. Amnt"
    }
      ],
      labelSeparator: " ",
      labelAlign: "top",
      layout: "netcolumn",
      padding: "20px 0px 0px 0px"
    },
        {
      id: "1_Panel1",
      height: 23,
      items: [
        {
      id: "1_Label2",
      xtype: "label",
      columnWidth: 0.073,
      text: "Cost"
    },
        {
      id: "1_TextField15",
      xtype: "textfield",
      columnWidth: 0.083
    },
        {
      id: "1_TextField16",
      xtype: "textfield",
      columnWidth: 0.083
    },
        {
      id: "1_TextField17",
      xtype: "textfield",
      columnWidth: 0.083
    },
        {
      id: "1_TextField18",
      xtype: "textfield",
      columnWidth: 0.083
    },
        {
      id: "1_TextField19",
      xtype: "textfield",
      columnWidth: 0.083
    },
        {
      id: "1_TextField20",
      xtype: "textfield",
      columnWidth: 0.083
    },
        {
      id: "1_TextField21",
      xtype: "textfield",
      columnWidth: 0.083
    },
        {
      id: "1_TextField22",
      xtype: "textfield",
      columnWidth: 0.083
    },
        {
      id: "1_TextField23",
      xtype: "textfield",
      columnWidth: 0.083
    },
        {
      id: "1_TextField24",
      xtype: "textfield",
      columnWidth: 0.083
    },
        {
      id: "1_TextField25",
      xtype: "textfield",
      columnWidth: 0.083,
      hideLabel: true
    }
      ],
      layout: "netcolumn"
    }
      ],
      layout: "auto",
      buttons: [
        {
      id: "1_save",
      xtype: "button",
      iconCls: "icon-disk",
      text: "Save"
    },
        {
      id: "1_Button1",
      xtype: "button",
      iconCls: "icon-accept",
      text: "Copy"
    },
        {
      id: "1_Button2",
      xtype: "button",
      iconCls: "icon-delete",
      text: "Delete"
    }
      ],
      iconCls: "icon-applicationosxdouble",
      title: "Summary",
      tools: [{
      id: "refresh"
    },{
      id: "save"
    },{
      id: "plus"
    }],
      checkboxToggle: true
    }
      ],
      collapsible: true,
      frame: true,
      title: "Production Line",
      contentEl: "1_pnl1_Content",
      method: "POST",
      url: "/WebClouders.Media.UserServices/Schedules.aspx"
    });
    
    pnl1s.addAndDoLayout(1_pnl1); <==== here is the error 1_pnl1 is undefined which should be surrounded by double quotes.
  4. #4

    RE: [CLOSED] [1.0] Loading User Controls in runtime

    Hi,



    Now after loading user controls using UpdateContents(), child controls
    doesn't maintain their view state!!.

    and Buttons doesn't call their DirectEvents Handlers



    consider we have a simple textbox inside the FormPanel [RootPanel] and
    we are trying to access its value, and one button with a directevent
    attached to it.






  5. #5

    RE: [CLOSED] [1.0] Loading User Controls in runtime

    Hi,

    1. Controls ids cannot start with number. Plese use correct ids
    pnl1s.addAndDoLayout(1_pnl1); <==== here is the error 1_pnl1 is undefined which should be surrounded by double quotes.

    No, that code should not contains quotes, just you use incorrect ids
    Please see (Variables names section) http://www.codeguru.com/csharp/sampl...le.php/c11387/


    2. Do you recreate user controls on each request? It is required for proper ViewState restoring and DirectEvents calling
    Please see http://geekswithblogs.net/shahed/arc...26/123391.aspx

Similar Threads

  1. Replies: 1
    Last Post: Jul 20, 2012, 8:08 AM
  2. [CLOSED] How should I nested ext.net.controls with user controls?
    By ViDom in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 04, 2012, 11:14 AM
  3. Replies: 5
    Last Post: Nov 03, 2011, 2:39 AM
  4. Replies: 0
    Last Post: Jan 05, 2011, 6:48 AM
  5. [CLOSED] Dynamic loading of user controls [1.0]
    By SFritsche in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Feb 11, 2010, 6:08 AM

Posting Permissions