Positioning dynamically loaded user control within TabPanel on ViewPort

  1. #1

    Positioning dynamically loaded user control within TabPanel on ViewPort

    Hello!

    I need to dynamically load user control within TabPanel which is located within centered ViewPort.
    Once user control is loaded it appears within tab, but it is not properly positioned:
    Click image for larger version. 

Name:	20.09WronUCPosition.jpg 
Views:	27 
Size:	44.5 KB 
ID:	6919

    Please see source code.
    Default.aspx:
    <%@ Page Language="C#" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        UserControl currentUC1;
        
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!string.IsNullOrWhiteSpace(CurrentControl.Text))
            {
                this.LoadUserControl(CurrentControl.Text, CurrentControl, currentUC1, PanelUC);
            }
        }
    
        private void LoadUserControl(string num, Hidden hidden, UserControl uc, Ext.Net.Panel targetPanel, bool update = false)
        {
            if (update && uc != null)
            {
                targetPanel.ContentControls.Clear();
            }
    
            uc = (UserControl)this.LoadControl(string.Format("UserControl{0}.ascx", num));
            uc.ID = "UC" + num;
            targetPanel.ContentControls.Add(uc);
            
            if (update)
            {
                hidden.Text = num;
                targetPanel.UpdateContent();
            }
        }
    
        private void ShowTab()
        {
            tpControls.ShowTab(PanelUC);
        }
    
        private void ButtonShowTabAndLoadControl_Click(object sender, DirectEventArgs e)
        {
            ShowTab();
            LoadUserControl("1", CurrentControl, currentUC1, PanelUC, true);
        }
    
    </script>
    
    <!DOCTYPE html>
    
    <html>
        <head runat="server">
            <title></title>
        </head>
        <body>
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <form>
                <ext:ViewPort runat="server"  >
                    <LayoutConfig>
                        <ext:VBoxLayoutConfig Align="Center" Pack="Center" />
                    </LayoutConfig>
                    <Items>
                        <ext:Hidden ID="CurrentControl" runat="server" />
                        <ext:Button 
                            ID="ButtonShowTabAndLoadControl" 
                            runat="server" 
                            Text="Show Tab AND Load User Control"
                            OnDirectClick="ButtonShowTabAndLoadControl_Click" 
                            />
                        <ext:Panel ID="PanelBorderLayout" runat="server"
                            Width="1200"
                            Height="800"
                            Layout="BorderLayout">
                            <Items>
                                <ext:Panel runat="server" Region="North" 
                                    Title="North (default height=50)"
                                    Height="50"
                                    Split="True"
                                    Closable="True">
                                </ext:Panel>
                                <ext:Panel runat="server" Region="West" 
                                    Title="West (defaultwidth=200)"
                                    Width="200"
                                    MaxWidth="400" 
                                    Split="true" 
                                    Closable="True">
                                </ext:Panel>
                                <ext:TabPanel runat="server" ID="tpControls" Region="Center" />        
                                
                                <ext:Panel 
                                    Hidden="True"
                                    ID="PanelUC" 
                                    runat="server" 
                                    Title="User Control1" 
                                    Width="500" 
                                    Height="700">
                                </ext:Panel>
                            </Items>
                        </ext:Panel>
                    </Items>
                </ext:ViewPort>
            </form>
        </body>
    </html>
    UserControl1.ascx:
    <%@ Control Language="C#" %>
    
    <script runat="server">
        protected void HelloFromServer(object sender, DirectEventArgs e)
        {
            X.Msg.Alert("Server", "Hello from server - UserControl №1").Show();
        }        
    </script>
    <style>
        .uc1 {
            background-color: lightgray;
        }
    </style>
    
    <div class="uc1">
        <h1>User control 1</h1>
        <ext:Label ID="Label1" runat="server" Text="I am User control №1" />
        <br />
        <ext:Button ID="Button1" runat="server" Text="User control №1: Ext.Net button" OnDirectClick="HelloFromServer" />
    </div>
    Expected behavior:
    User control should be positioned at top-left corner of tab.

    Thanks in advance!
  2. #2
    Dear support team!

    Please let me know if provided source code does not work or any reason why this post still does not have a single reply.
    I look forward to hearing from you!

    Thanks!
  3. #3
    You have to move PanelUC panel outside panel with BorderLayout, for example, move that panel outside Viewport
    Also I am not sure why do you use such approach, why don't you render panel dynamically like in the following sample

    <%@ Page Language="C#" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
    <script runat="server">
        UserControl currentUC1;
         
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!string.IsNullOrWhiteSpace(CurrentControl.Text))
            {
                var p = new Ext.Net.Panel
                {
                    ID = "PanelUC",
                    Title = "User Control1"
                };
                tpControls.Items.Add(p);
                this.LoadUserControl(CurrentControl.Text, CurrentControl, currentUC1, p);
            }
        }
     
        private void LoadUserControl(string num, Hidden hidden, UserControl uc, Ext.Net.Panel targetPanel, bool update = false)
        {
            if (update && uc != null)
            {
                targetPanel.ContentControls.Clear();
            }
     
            uc = (UserControl)this.LoadControl("Child.ascx");
            uc.ID = "UC" + num;
            targetPanel.ContentControls.Add(uc);
             
            if (update)
            {
                hidden.Text = num;
                targetPanel.UpdateContent();
            }
        }
      
        private void ButtonShowTabAndLoadControl_Click(object sender, DirectEventArgs e)
        {
            var p = new Ext.Net.Panel {
                ID = "PanelUC",
                Title = "User Control1"
            };
            LoadUserControl("1", CurrentControl, currentUC1, p, false);
            p.AddTo(tpControls);
            tpControls.SetLastTabAsActive();
        }
     
    </script>
     
    <!DOCTYPE html>
     
    <html>
        <head runat="server">
            <title></title>
        </head>
        <body>
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <form>
                <ext:ViewPort runat="server"  >
                    <LayoutConfig>
                        <ext:VBoxLayoutConfig Align="Center" Pack="Center" />
                    </LayoutConfig>
                    <Items>
                        <ext:Hidden ID="CurrentControl" runat="server" />
                        <ext:Button
                            ID="ButtonShowTabAndLoadControl"
                            runat="server"
                            Text="Show Tab AND Load User Control"
                            OnDirectClick="ButtonShowTabAndLoadControl_Click"
                            />
                        <ext:Panel ID="PanelBorderLayout" runat="server"
                            Width="1200"
                            Height="800"
                            Layout="BorderLayout">
                            <Items>
                                <ext:Panel runat="server" Region="North"
                                    Title="North (default height=50)"
                                    Height="50"
                                    Split="True"
                                    Closable="True">
                                </ext:Panel>
                                <ext:Panel runat="server" Region="West"
                                    Title="West (defaultwidth=200)"
                                    Width="200"
                                    MaxWidth="400"
                                    Split="true"
                                    Closable="True">
                                </ext:Panel>
                                <ext:TabPanel runat="server" ID="tpControls" Region="Center" />                            
                            </Items>
                        </ext:Panel>
                    </Items>
                </ext:ViewPort>
            </form>
        </body>
    </html>
    Vladimir Shcheglov
    Sr. Developer
  4. #4
    Vladimir,

    Thank you very much for your assistance!

    I have tried this approach in the following way: copied provided source code and replaced line 28
    uc = (UserControl)this.LoadControl("Child.ascx");
    with this:
    uc = (UserControl)this.LoadControl("UserControl1.ascx");
    Source code for UserControl1.ascx I have already posted.

    Despite the fact that UserControl is recreated on every postback, DataLoad button stopped working, showing Server error:
    Click image for larger version. 

Name:	Screenshot 2013-09-27 17.49.22.jpg 
Views:	24 
Size:	94.9 KB 
ID:	6957

    Do you have any ideas on how to workaround this?

    Thank you very much!
  5. #5
    First, your form has no runat attribute therefore ASP.NET never handle submitted data
    Second, in my sample need to move 'hidden.Text = num;' out 'if (update)' because update is always false in my sample
    Vladimir Shcheglov
    Sr. Developer
  6. #6

    Resolved

    Quote Originally Posted by Vladimir View Post
    First, your form has no runat attribute therefore ASP.NET never handle submitted data
    Second, in my sample need to move 'hidden.Text = num;' out 'if (update)' because update is always false in my sample
    Hello, Vladimir,

    Sorry for late response. Seems now it works as expected, thank you very much!

Similar Threads

  1. Replies: 2
    Last Post: May 09, 2013, 4:41 PM
  2. Replies: 1
    Last Post: Oct 10, 2012, 12:47 PM
  3. Replies: 0
    Last Post: May 17, 2012, 12:29 AM
  4. Replies: 2
    Last Post: Dec 08, 2011, 2:00 PM
  5. [CLOSED] [1.0] User Control loaded several times
    By FVNoel in forum 1.x Premium Help
    Replies: 4
    Last Post: Jul 07, 2011, 11:33 AM

Tags for this Thread

Posting Permissions