What's New?

regarding usercontrol load in runtime

Page 2 of 3 FirstFirst 123 LastLast
  1. #11
    May 27, 2011, 7:19 PM

    spam

    No,i don't know how they appear there.Why should i do that but sorry as it happen from my side.I still can't understand how they appear there.
  2. #12
    May 27, 2011, 7:42 PM

    placeholder

    What about my question regarding placeholder?it still showing blank page.
  3. #13
    May 27, 2011, 8:16 PM
    I suggested to call .UpdateContent(), not .Update().
  4. #14
    May 28, 2011, 12:02 PM

    Still showing blank page

    Hi

    I am still getting blank page

    Posting code again

    Main page ( .aspx )

    <script runat="server">
protected void Page_Load(object sender, EventArgs e)
    {
       
        this.Tab1.ContentControls.Add(LoadControl("Grid.ascx"));

      }

  protected void Menu3_Click(object sender, DirectEventArgs e)
    {
      
        vwnew.Hidden = true;       
        cont.ContentContainer.Controls.Add(LoadControl("CanProfile.ascx"));      
        cont.UpdateContent();
    }

 </script>   


<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
      <link href="resources/css/examples.css" rel="stylesheet" type="text/css" />
      <script type="text/javascript">                
        var employeeDetailsRender = function () {
            return '<img class="imgEdit" ext:qtip="Click to view/edit additional details" style="cursor:pointer;" src="vcard_edit.png" />';
        };

        var cellClick = function (grid, rowIndex, columnIndex, e) {
            var t = e.getTarget(),
                record = grid.getStore().getAt(rowIndex),  // Get the Record
                columnId = grid.getColumnModel().getColumnId(columnIndex); // Get column id

            if (t.className == "imgEdit" && columnId == "Details") {
                //the ajax call is allowed
                return true;
            }
            
            //forbidden
            return false;
        };
    </script>
</head>
<body>

     <%-- <ext:ResourceManager ID="ResourceManager1" runat="server" />--%>

    
  <ext:Viewport ID="vwnew" runat="server">
          <Items>
           <ext:FitLayout ID="FitLayout1" runat="server"> 
                <Items>
                     <ext:Panel 
                                ID="Tab1" 
                                runat="server"                                 
                                Icon="Vcard" 
                                BodyStyle="background-color: transparent;"
                                Layout="Fit">   
                                 <TopBar>
                <ext:Toolbar ID="Toolbar1" runat="server">
                    <Items>
                    <ext:Button ID="Button3" runat="server" Icon="Application" Text="With menu">
                            <Menu>
                              <ext:Menu ID="Menu1" runat="server">
                                <Items>
                                    <ext:MenuItem ID="MenuItem1" runat="server" Icon="Accept" Text="Menu 1" Handler="function () {alert('Menu 1');}" />
                                    <ext:MenuItem ID="MenuItem2" runat="server" Icon="Add" Text="Menu 2">
                                        <Listeners>
                                            <Click Handler="alert('Menu 2');" />
                                        </Listeners>
                                    </ext:MenuItem>
                                    <ext:MenuItem ID="MenuItem3" runat="server" Text="Menu 3">
                                        <DirectEvents>
                                            <Click OnEvent="Menu3_Click">
                                                <EventMask ShowMask="true" />
                                                <ExtraParams>
                                                    <ext:Parameter Name="Param" Value="Menu 3" Mode="Value" />
                                                </ExtraParams>
                                            </Click>
                                        </DirectEvents>
                                    </ext:MenuItem>
                                    <ext:MenuSeparator ID="MenuSeparator1" runat="server" />
                                    <ext:MenuItem ID="MenuItem4" runat="server" Text="Menu 5" />
                                </Items>
                              </ext:Menu>
                            </Menu>
                           <%-- <ToolTips>
                                <ext:ToolTip runat="server" Html="Application" />
                            </ToolTips>--%>
                       </ext:Button>
                         </Items>
                </ext:Toolbar>
                
            </TopBar>  
          
                </ext:Panel>
           </Items>
        </ext:FitLayout>

        </Items>
    </ext:Viewport>
    
    
   <%-- <gd:Grid ID="Grid1" runat="server" />--%>
    
       <ext:Container ID="cont" runat="server">   
       <Content>
    <asp:PlaceHolder ID="PlaceHolder1" runat="server" />
    </Content>   
    </ext:Container>
   <%--<cp1:CanProfile ID="CanProfile1" runat="server" />--%>
</body>
</html>

    and control page (.ascx ) is 

    <script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            string text = @"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.";

            //this.ResourceManager1.RegisterClientScriptBlock("text", string.Format("var text=\"{0}\";", text));

            foreach (Portlet portlet in ControlUtils.FindControls<Portlet>(this.Page))
            {
                if (!portlet.ID.Equals("Portlet1"))
                {
                    portlet.Html = "aaaaaaaaaaaa";
                    portlet.Padding = 5;
                }
            }
        }
    }

    protected void Menu3_Click(object sender, DirectEventArgs e)
    {
        X.MessageBox.Alert("Click", e.ExtraParams["Param"]);
    }

    protected void Change1Click(object sender, DirectEventArgs e)
    {
        this.Portlet1.Hidden = true;
        this.Portlet2.Hidden = false;
    }
    
</script>
<style type="text/css">
    body {
        font-size: 12px;
        background-color: #284051;
        font-family: "Trebuchet MS",sans-serif;
    }
    
    #settingsWrapper {
        border-bottom: 1px solid #111;
        background-color: #323232;
        padding-left: 4px;
    }
    
    #settings {
        padding: 2px;
        border-bottom: 1px solid #3B3B3B;
    }
    
    #settings ul li {
        display: inline;
        color: #fff;
        margin-right: 8px;
        line-height: 24px;
        padding: 2px;
        padding-left: 19px;
    }
    
    #settings ul li a, #settings ul li a:link {
        color: #fff;
        text-decoration: none;
    }
    
    #settings ul li a:hover {
        text-decoration: underline;
    }
    
    #pageTitle {
        font-family: "Trebuchet MS",sans-serif;
        font-size: 17px;
        text-align: center;
        color: #fff;
        margin-top: 20px;
    }
    
    #itemAddContent {
       
    }
    
    #itemComments {
      
    }
    
    #itemActivities {
       
    }
    
    #itemContacts {
        
    }
    
    #TabPanel1 ul.x-tab-strip-top {
        background-image: none !important;
        background-color: #284051;
    }
  
    .x-panel-dd-spacer {
        border: 2px dashed #284051;
    }
</style>
 <ext:Viewport ID="vw" runat="server" StyleSpec="background-color: transparent;">
        <Items>
            <ext:BorderLayout ID="BorderLayout1" runat="server">
                <North>
                    <ext:Panel 
                        ID="pnlNorth" 
                        runat="server" 
                        Height="80" 
                        Border="false" 
                        Header="false" 
                        BodyStyle="background-color: transparent;">
                        <Content>                           
                             
                        </Content>
                    </ext:Panel>
                </North>
                <West 
                    Collapsible="true"
                    Split="true" 
                    MinWidth="175" 
                    MaxWidth="400" 
                    MarginsSummary="25 0 5 5" 
                    CMarginsSummary="25 0 5 5">
                    <ext:Panel 
                        runat="server" 
                        Title="Settings" 
                        Width="200" 
                        ID="pnlSettings"
                        BodyStyle="background-color: #284051;">
                        <Items>
                            <ext:AccordionLayout ID="AccordionLayout1" runat="server" Animate="true">
                                <Items>
                                    <ext:Panel ID="Panel1" 
                                        runat="server" 
                                        Border="false" 
                                        Collapsed="True" 
                                        Icon="PageWhiteCopy"
                                        AutoScroll="true"
                                        Title="Content"
                                        Html="<a href='CanReg.aspx'>can</a>"
                                        Padding="6"
                                        />
                                    <ext:Panel ID="Panel2" 
                                        runat="server" 
                                        Border="false" 
                                        Collapsed="true" 
                                        Icon="Star" 
                                        AutoScroll="true"
                                        Title="Activities" 
                                        Html="sssssssssss"
                                        Padding="6"
                                        />
                                    <ext:Panel ID="Panel3" 
                                        runat="server" 
                                        Border="false" 
                                        Collapsed="true" 
                                        Icon="Group" 
                                        AutoScroll="true"
                                        Title="Contacts" 
                                        Html="ddddddddd"
                                        Padding="6"
                                        />    
                                </Items>                                    
                            </ext:AccordionLayout>
                        </Items>
                    </ext:Panel>
                </West>
                <Center MarginsSummary="5 5 5 0">
                   
                            <ext:Panel 
                                ID="Tab1" 
                                runat="server" 
                                Title="Internet" 
                                Icon="Vcard" 
                                BodyStyle="background-color: transparent;"
                                Layout="Fit">
                                <Items>
                                    <ext:Portal 
                                        ID="Portal1" 
                                        runat="server" 
                                        Border="false" 
                                        BodyStyle="background-color: transparent;"
                                        Layout="Column">
                                        <Items>
                                            <ext:PortalColumn ID="PortalColumn1" 
                                                runat="server" 
                                                StyleSpec="padding:10px 0 10px 10px"
                                                ColumnWidth=".33"
                                                                                                
                                                Layout="Anchor">
                                                <Items>
                                                    <ext:Portlet 
                                                        ID="Portlet1" 
                                                        Title="Google Search" 
                                                        runat="server" 
                                                        Height="450"
                                                        Padding="0">
                                                       <%-- <AutoLoad Url="http://www.google.com/" Mode="IFrame" />--%>
                                                         <Items>
                    <ext:Panel ID="Panel4" runat="server" Border="false" Header="false" ColumnWidth=".5" Layout="Form">
                    <Defaults>
                        <ext:Parameter Name="AllowBlank" Value="false" Mode="Raw" />
                       <ext:Parameter Name="MsgTarget" Value="side" />
                    </Defaults>
                    <Items>
                        <ext:TextField ID="TextField11" runat="server" FieldLabel="My Name" Anchor="62%" />
                        <ext:TextField ID="TextField12" runat="server" FieldLabel="My Company" AnchorHorizontal="62%" />
                        <ext:TextField ID="TextField1" Name="dd" runat="server" FieldLabel="First Name" AnchorHorizontal="62%" />
                        <ext:TextField ID="TextField2" runat="server" FieldLabel="Company" AnchorHorizontal="62%" />
                        <ext:TextField ID="TextField3" runat="server" FieldLabel="First Name" AnchorHorizontal="62%" />
                        <ext:TextField ID="TextField4" runat="server" FieldLabel="Company" AnchorHorizontal="62%" />
                        <ext:TextField ID="TextField5" runat="server" FieldLabel="First Name" AnchorHorizontal="62%" />
                        <ext:TextField ID="TextField6" runat="server" FieldLabel="Company" AnchorHorizontal="62%" />
                        <ext:TextField ID="TextField7" runat="server" FieldLabel="First Name" AnchorHorizontal="62%" />
                        <ext:TextField ID="TextField8" runat="server" FieldLabel="Company" AnchorHorizontal="62%" />
                        <ext:TextField ID="TextField9" runat="server" FieldLabel="First Name" AnchorHorizontal="62%" />
                        <ext:TextField ID="TextField10" runat="server" FieldLabel="Company" AnchorHorizontal="62%" />
                        <ext:TextField ID="TextField13" runat="server" FieldLabel="First Name" AnchorHorizontal="62%" />
                        <ext:TextField ID="TextField14" runat="server" FieldLabel="Company" AnchorHorizontal="62%" />
                        <ext:TextField ID="TextField15" runat="server" FieldLabel="First Name" AnchorHorizontal="62%" />
                        <ext:TextField ID="TextField16" runat="server" FieldLabel="Company" AnchorHorizontal="62%" />
                    </Items>
                </ext:Panel>
                                                          </Items>
                                                          <Buttons>
                                                            <ext:Button ID="Button1" runat="server" Text="Next"  />
                                                            </Buttons>
                                                    </ext:Portlet>
                                                    
                                                     <ext:Portlet 
                                                        ID="Portlet2" 
                                                        Title="Google Search" 
                                                        runat="server" 
                                                        Height="450"
                                                        Hidden="true"
                                                        Padding="0">
                                                       <%-- <AutoLoad Url="http://www.google.com/" Mode="IFrame" />--%>
                                                         <Items>
                    <ext:Panel ID="Panel5" runat="server" Border="false" Header="false" ColumnWidth=".5" Layout="Form">
                    <Defaults>
                        <ext:Parameter Name="AllowBlank" Value="false" Mode="Raw" />
                       <ext:Parameter Name="MsgTarget" Value="side" />
                    </Defaults>
                    <Items>
                        <ext:TextField ID="TextField17" runat="server" FieldLabel="UR Name" Anchor="62%" />
                        <ext:TextField ID="TextField18" runat="server" FieldLabel="UR Company" AnchorHorizontal="62%" />
                        <ext:TextField ID="TextField19" runat="server" FieldLabel="Last Name" AnchorHorizontal="62%" />
                        <ext:TextField ID="TextField20" runat="server" FieldLabel="Address" AnchorHorizontal="62%" />
                        <ext:TextField ID="TextField21" runat="server" FieldLabel="Gender" AnchorHorizontal="62%" />
                        <ext:TextField ID="TextField22" runat="server" FieldLabel="Company" AnchorHorizontal="62%" />
                        <ext:TextField ID="TextField23" runat="server" FieldLabel="First Name" AnchorHorizontal="62%" />
                        <ext:TextField ID="TextField24" runat="server" FieldLabel="Company" AnchorHorizontal="62%" />
                        <ext:TextField ID="TextField25" runat="server" FieldLabel="First Name" AnchorHorizontal="62%" />
                        <ext:TextField ID="TextField26" runat="server" FieldLabel="Company" AnchorHorizontal="62%" />
                        <ext:TextField ID="TextField27" runat="server" FieldLabel="First Name" AnchorHorizontal="62%" />
                        <ext:TextField ID="TextField28" runat="server" FieldLabel="Company" AnchorHorizontal="62%" />
                        <ext:TextField ID="TextField29" runat="server" FieldLabel="First Name" AnchorHorizontal="62%" />
                        <ext:TextField ID="TextField30" runat="server" FieldLabel="Company" AnchorHorizontal="62%" />
                        <ext:TextField ID="TextField31" runat="server" FieldLabel="First Name" AnchorHorizontal="62%" />
                        <ext:TextField ID="TextField32" runat="server" FieldLabel="Company" AnchorHorizontal="62%" />
                    </Items>
                </ext:Panel>
                                                          </Items>
                                                           <Buttons>
                                                            <ext:Button ID="Button2" runat="server" Text="Next"  />
                                                            </Buttons>
                                                    </ext:Portlet>
                                                </Items>
                                                 
                                            </ext:PortalColumn>
                                           
                                        </Items>
                                    </ext:Portal>
                                </Items>
                            </ext:Panel>
                           
                </Center>
            </ext:BorderLayout>
        </Items>
    </ext:Viewport>

    as i am using Viewport in control page and try to disply it in main ,is this causing problem?
  5. #15
    May 29, 2011, 10:12 PM
    Viewport must be a single top level control on a page. So, use only one Viewport on a page and don't use it within user controls.

    I am still getting blank page
    Please clarify when? On Menu 3 click? If yes, I have no "CanProfile.ascx" to reproduce the issue.

    Also please clarify why do use so strange construction? Why do you use PlaceHolder? It's not required to render a user control dynamically.

    <ext:Container ID="cont" runat="server">
    <Content>
        <asp:PlaceHolder ID="PlaceHolder1" runat="server" />
    </Content>
</ext:Container>
  6. #16
    May 30, 2011, 7:26 AM

    Reason for using placeholder

    hi

    As it is not possible to render viewport in another viewport that's why i take a place holder to display a control page containing viewport there.
    At runtime i am trying to hide viewport of current page at the same time trying to load control page containg viewport to load in that placeholder.
    Is there any other way i can achieve this ? i want looking like a viewport for one menu click but for other menu click grid display in fitlayout.
  7. #17
    May 30, 2011, 9:59 AM
    I'd suggest you to use CardLayout.

    Please investigate the example below.

    Example Page
    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void Button2_Click(object sender, DirectEventArgs e)
    {
        TestUC uc = (TestUC)this.LoadControl("TestUC.ascx");
        this.Panel2.ContentControls.Add(uc);
        uc.DataBind();
        this.Panel2.InsertTo(1, this.Panel1);
        this.Panel2.AddScript(this.Panel2.ClientID + ".gridRendered = true;");
        ((Ext.Net.Button)sender).Disabled = true;
        this.Button1.Disabled = false;
        this.Panel1.ActiveIndex = 1;
    }
</script>

<!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 runat="server">
    <title>Ext.Net Example</title>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:Viewport runat="server" Layout="BorderLayout">
        <Items>
            <ext:Panel 
                runat="server" 
                Region="North" 
                Title="North" 
                Height="100">
                <Items>
                    <ext:Button 
                        ID="Button1" 
                        runat="server" 
                        Text="Default view" 
                        Disabled="true">
                        <Listeners>
                            <Click Handler="Panel1.layout.setActiveItem(0);
                                            this.disable();
                                            Button2.enable();" />
                        </Listeners>
                    </ext:Button>
                    <ext:Button ID="Button2" runat="server" Text="Grid view">
                        <Listeners>
                            <Click Handler="if (!Panel2.gridRendered) {
                                                return true; //to allow Click DirectEvent
                                            } else {
                                                Panel1.layout.setActiveItem(1);
                                                this.disable();
                                                Button1.enable();
                                                return false; //to prevent Click DirectEvent
                                            }" />
                        </Listeners>
                        <DirectEvents>
                            <Click OnEvent="Button2_Click" />
                        </DirectEvents>
                    </ext:Button>
                </Items>
            </ext:Panel>
            <ext:Panel 
                ID="Panel1" 
                runat="server" 
                Region="Center" 
                Layout="CardLayout" 
                ActiveIndex="0">
                <Items>
                    <ext:Panel 
                        runat="server" 
                        Title="Default view" 
                        Html="Default view" />
                    <ext:Panel 
                        ID="Panel2" 
                        runat="server" 
                        Title="Grid view" 
                        Height="500" />
                </Items>
            </ext:Panel>
        </Items>
    </ext:Viewport>
    </form>
</body>
</html>
    Example User Control
    <%@ Control Language="C#" ClassName="TestUC" %>

<script runat="server">
    public void DataBind()
    {
        this.Store1.DataSource = new object[] 
        { 
            new object[] { "test11", "test12", "test13" },
            new object[] { "test12", "test22", "test23" },
            new object[] { "test13", "test32", "test33" }
        };
        this.Store1.DataBind();
    }
</script>

<ext:FitLayout runat="server">
    <Items>
        <ext:GridPanel ID="GridPanel1" runat="server">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="test1" />
                                <ext:RecordField Name="test2" />
                                <ext:RecordField Name="test3" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Test1" DataIndex="test1" />
                    <ext:Column Header="Test2" DataIndex="test2" />
                    <ext:Column Header="Test3" DataIndex="test3" />
                </Columns>
            </ColumnModel>
        </ext:GridPanel>
    </Items>
</ext:FitLayout>
    P.S. Please always simplify your samples as much as you can.
  8. #18
    May 30, 2011, 10:25 AM
    Thanks for help

    The solution you provided is for grid display in Fitlayout

    In my case grid is coming but when i click on Menu3 button page is showing blank

    in Menu3 button click i tried to hide viewport used to display grid ,at the same time loading control page containing Viewport in placeholder

    Code is :

    protected void Menu3_Click(object sender, DirectEventArgs e)
    {
         vwnew.Hidden = true;
         cont.ContentContainer.Controls.Add(LoadControl("CanProfile.ascx"));
         cont.Update();
        
     }
    Last edited by Daniil; May 30, 2011 at 10:32 AM. Reason: Please use [CODE] tags
  9. #19
    May 30, 2011, 10:35 AM
    Repeat myself, you have to redesign your code.

    Don't use two Viewports. Viewport also support any layouts - so, you can use CardLayout as Viewport's layout.

    It seems I've already said that .Update() doesn't make sense in this case.
    cont.Update();
    Just follow my example.
  10. #20
    May 30, 2011, 10:49 AM
    i tried with cont.UpdateContent(); also but reult is same

    Actually i want BorderLayout looking in control page load ( i.e on Menu3 button click) but by default ( for other pages ) Fitlayout,that's the problem .How to achieve that.
Page 2 of 3 FirstFirst 123 LastLast

Similar Threads

  1. [1.2] Bug: FitLayout fails to render if in UserControl that is Loaded at runtime
    By michaeld in forum 1.x Help
    Replies: 2
    Last Post: Nov 04, 2011, 12:33 AM
  2. [CLOSED] Problem rendering usercontrol within BorderLayout at runtime
    By GavinR in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Sep 08, 2010, 9:14 AM
  3. load usercontrol in viewport
    By maxdiable in forum 1.x Help
    Replies: 1
    Last Post: Jul 28, 2010, 11:01 PM
  4. Load usercontrol by AjaxEvents
    By latif in forum 1.x Help
    Replies: 4
    Last Post: Dec 15, 2009, 3:22 PM
  5. How to load URL in Window at runtime, not using AutoLoad?
    By dbassett74 in forum 1.x Help
    Replies: 9
    Last Post: Apr 29, 2009, 8:12 PM

Tags for this Thread

Posting Permissions