What's New?

Loading a UserControl (ascx) to a page

  1. #1
    Dec 30, 2008, 11:51 AM

    Loading a UserControl (ascx) to a page



    Hello,


    I'm trying to load a UserControl dynamically into the <Center> in a viewport control and I'm having a rough time accomplishing this.
    I have a <asp:PlaceHolder> object and trying to populate the UserControl into this control and I'm getting the following error;

    Parent for Layout Control (BorderLayout1) must be a Coolite Container Control, such as Panel, TabPanel, Window, ViewPort, etc.

    Is there a better way to get around this ?
    If I put the UserControl reference in between the <Body> tags instead of the PlaceHolder, everything works well. But I really want to dynamically load different User Controls.



    Codebehind
    protected void Page_Load(object sender, EventArgs e)


{
     if (!IsPostBack)


     {
          EmployeesList cu = (EmployeesList)Page.LoadControl("EmployeesList.ascx");


          this.plhControl1.Controls.Add(cu);
     }
}
    Main Page HTML
    <Center MarginsSummary="2 2 2 2">
    <ext:Panel ID="Panel2" 
 runat="server" 
 Title="Search Result for: "
 Border="false">
  <Body>
      <asp:PlaceHolder ID="plhControl1" runat="server"></asp:PlaceHolder>
  </Body>


    </ext:Panel>
</Center>
    The UserControl HTML
    
<ext:BorderLayout ID="BorderLayout1" runat="server">
    <Center>
        <ext:Panel ID="Panel2" runat="server" Title="" Header="false">
            <Body>
                <ext:FitLayout ID="FitLayout1" runat="server">
                    <ext:GridPanel ID="GridPanel1" runat="server" StoreID="storeUserList" Frame="true">
                        <columnmodel id="ColumnModel2" runat="server">
        <Columns>
            <ext:RowNumbererColumn />
            <ext:Column ColumnID="systemUserID" Header="User Id" DataIndex="SYSTEMUSERID" Width="120"
                Hidden="true" />
            <ext:Column ColumnID="PersonID" Header="User Id" DataIndex="PERSONID" Width="120"
                Hidden="true" />
            <ext:Column Header="User Id" DataIndex="USERID" Width="120"  />
            <ext:Column Header="Last Name" DataIndex="LASTNAME" Width="120"  />
            <ext:Column Header="First Name" DataIndex="FIRSTNAME" Width="120"  />
            <ext:Column Header="Middle Name" DataIndex="MIDDLENAME" Width="120"  />
            <ext:Column Header="Title" DataIndex="TITLE" Width="120"  />
            <ext:Column ColumnID="Details" 
                Header="Details" 
                DataIndex="DETAILS" 
                Width="50" 
                Align="Center" 
                Fixed="true" 
                MenuDisabled="true" 
                Resizable="false">
                    <Renderer Fn="employeeDetailsRender" /> 
            </ext:Column>


        </Columns>
    </columnmodel>
                        <plugins>
        <ext:GridFilters runat="server" ID="GridFilters1" Local="true">
            <Filters>
                <ext:StringFilter DataIndex="LASTNAME" />                                    
                <ext:StringFilter DataIndex="FIRSTNAME" />
                <ext:StringFilter DataIndex="TITLE" />
            </Filters>
        </ext:GridFilters>
     </plugins>
                        <selectionmodel>
        <ext:RowSelectionModel runat="server" SingleSelect="true">
            </ext:RowSelectionModel>
        </selectionmodel>
                        <bottombar>
            <ext:PagingToolBar ID="PagingToolBar2" runat="server" PageSize="18"/>
        </bottombar>
                        <loadmask showmask="true" />
                    </ext:GridPanel>
                </ext:FitLayout>
            </Body>
        </ext:Panel>
    </Center>
</ext:BorderLayout>
<ext:Store ID="storeUserList" runat="server" OnRefreshData="Refresh_Employee">
    <Reader>
        <ext:JsonReader>
            <Fields>
                <ext:RecordField Name="SYSTEMUSERID" />
                <ext:RecordField Name="PERSONID" />
                <ext:RecordField Name="USERID" />
                <ext:RecordField Name="LASTNAME" />
                <ext:RecordField Name="FIRSTNAME" />
                <ext:RecordField Name="MIDDLENAME" />
                <ext:RecordField Name="TITLE" />
                <ext:RecordField Name="DETAILS" />
            </Fields>
        </ext:JsonReader>
    </Reader>
</ext:Store>
    Thank you in advance,
  2. #2
    Dec 30, 2008, 12:18 PM

    RE: Loading a UserControl (ascx) to a page

    Hi,

    try to add user control to the BodyControls of Center panel instead PlaceHolder


    *
  3. #3
    Dec 30, 2008, 6:09 PM

    RE: Loading a UserControl (ascx) to a page

    Hi Ernesto,*

    As mentioned by Vladimir, remove the PlaceHolder Control, then use the following code to add to the BodyControls collection.


    Example


    Panel2.BodyControls.Add(cu);

    Hope this helps.


    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  4. #4
    Dec 31, 2008, 11:22 AM

    RE: Loading a UserControl (ascx) to a page

    Geoffrey,

    Works like a charm!

    Thank you very much for your help.
  5. #5
    Dec 31, 2008, 11:40 AM

    RE: Loading a UserControl (ascx) to a page



    One more question...
    This UserControl is being loaded in a page which is inhereted from a masterpage, the master page contains a contentplaceholder and the child page has a borderlayout that is placed inside the contentplaceholder control. Now when I click the refresh button from the control G ridpanel to execute a refresh from the Store control I get the following error;

    The control with ID 'ctl00_cplCenter_ctl19_storeUserList' not found

    The Stack Trace shows the following;
    Coolite.Ext.Web.ScriptManager.RaisePostBackEvent(S tring eventArgument)

    as if the ScriptManager does not know that a dynamically created Store or Coolite object exisit on a postback.

    MasterPage
    .....
 <Center MarginsSummary = "40 0 0 0">
      <ext:Panel ID="Panel5" runat="server" Title="Center" Header="False">
           <Body>
            <asp:ContentPlaceHolder ID="cplCenter" runat="server">
   </asp:ContentPlaceHolder>
           </Body>
       </ext:Panel>
 </Center>
    Child Page
    <ext:BorderLayout ID="BorderLayout1" runat="server">
  <West>
  .........
  </West>
       <Center MarginsSummary="2 2 2 2">


      <ext:Panel ID="Panel2" 
   runat="server" 
   Title="Search Result for: "
   Border="false">
   <Body>
    <%-- User Control loaded here... --%>
   </Body>


      </ext:Panel>
  </Center>
 </ext:BorderLayout>
    Codebehind refresh Store in UserControl
    
// Store HTML
<ext:Store ID="storeUserList" runat="server" OnRefreshData="Refresh_Employee">
    ..............


protected void Refresh_Employee(object sender, StoreRefreshDataEventArgs e)
 {
     LoadData();
 }

    Any ideas?

Similar Threads

  1. How to hide the window containing the UserControl and call the method on the page that contains UserControl?
    By Cyrus in forum 1.x Help
    Replies: 1
    Last Post: May 29, 2013, 6:00 PM
  2. [CLOSED] Difference Store behaviour Usercontrol (.ASCX) vs Class (.CS)
    By pschojer in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Apr 18, 2012, 3:51 PM
  3. [CLOSED] Loading usercontrol with only the path (usercontrol contains ext.window inside)
    By supera in forum 2.x Legacy Premium Help
    Replies: 8
    Last Post: Feb 15, 2012, 9:04 AM
  4. panel or tabpanel autoload usercontrol .ascx
    By manelj in forum 1.x Help
    Replies: 5
    Last Post: Feb 26, 2009, 11:21 AM
  5. Get id of elements into page.ascx
    By flaviodamaia in forum 1.x Help
    Replies: 3
    Last Post: Jan 23, 2009, 7:26 AM

Posting Permissions