Dynamically load user control on hidden tab

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1

    Dynamically load user control on hidden tab

    Hello!

    There is a hidden tab. Need to show this tab and load user control on it within one method.
    It is possible to do within two separate calls, but not within a single one.
    Here is the 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, Panel1);
            }
        }
    
        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 ButtonShowTab_Click(object sender, DirectEventArgs e)
        {
            ShowTab();
    
            ButtonShowTab.Disable();
            ButtonLoadControl.Enable();
            ButtonShowTabAndLoadControl.Disable();
        }
    
        private void ShowTab()
        {
            Panel1.Hidden = false;
            tpControls.Render();
        }
    
        protected void ButtonLoadControl_Click(object sender, DirectEventArgs e)
        {
            LoadUserControl("1", CurrentControl, currentUC1, Panel1, true);
            
            ButtonLoadControl.Disabled = true;
            X.Msg.Alert("Correct work", "This works as expected. Now reload page and click 'Show Tab AND Load User Control' button.").Show();
        }
    
        private void ButtonShowTabAndLoadControl_Click(object sender, DirectEventArgs e)
        {
            ShowTab();
            LoadUserControl("1", CurrentControl, currentUC1, Panel1, true);
            
            ButtonShowTab.Disable();
            this.ButtonLoadControl.Disable();
        }
    
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
             
            <h1>Load user control on hidden tab:</h1>
            
            <h3>Two ways to complete:</h3>
            <ol>
                <li>
                    Click button 'Show Tab' and then 'Load User Control'. This works as expected
                </li>
                <li>
                    Click button 'Show Tab AND Load User Control'. This performs _THE_SAME_ operations as separate buttons, but does not work.
                </li>
            </ol>
            
            <ext:Hidden ID="CurrentControl" runat="server" />
            <ext:Panel 
                runat="server"
                Layout="HBox">
                <Items>
                    <ext:Panel runat="server" Layout="VBox">
                        <Items>
                            <ext:Button 
                                ID="ButtonShowTab" 
                                runat="server" 
                                Text="Show Tab"
                                OnDirectClick="ButtonShowTab_Click" 
                                />
                            <ext:Button 
                                ID="ButtonLoadControl" 
                                runat="server" 
                                Text="Load User Control"
                                Disabled="True"
                                OnDirectClick="ButtonLoadControl_Click" 
                                />
                        </Items>
                    </ext:Panel>
                    <ext:Button 
                        ID="ButtonShowTabAndLoadControl" 
                        runat="server" 
                        Text="Show Tab AND Load User Control"
                        OnDirectClick="ButtonShowTabAndLoadControl_Click" 
                        />
                </Items>
            </ext:Panel>
            <ext:TabPanel runat="server" ID="tpControls">
                <Items>
                     <ext:Panel 
                         Hidden="True"
                        ID="Panel1" 
                        runat="server" 
                        Title="User Controls1" 
                        Width="500" 
                        Height="700"
                        BodyPadding="5">
                    </ext:Panel>
                </Items>
            </ext:TabPanel>
        </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>
    
    <h1>№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" />
    How to reproduce:
    Click button 'Show Tab AND Load User Control' - no user control appeares. If two separate buttons 'Show Tab' and 'Load User Control' are clicked, user control appears correctly.

    Look forward to hearing from you!
    Thanks!
  2. #2
    Just remove Render from ShowTab, you don't need it, control cannot be rendered twice per request
  3. #3
    Quote Originally Posted by Vladimir View Post
    Just remove Render from ShowTab, you don't need it, control cannot be rendered twice per request
    I have commented line #45
    tpControls.Render();
    and clicked "Show Tab AND Load User Control" button.
    In this case tab header does not show as expected:
    Click image for larger version. 

Name:	NoTabTitle.PNG 
Views:	16 
Size:	7.9 KB 
ID:	6911
    If Render() is called during the first call, then tab title exists
    Click image for larger version. 

Name:	ExistsTabTitle.PNG 
Views:	8 
Size:	8.1 KB 
ID:	6912
  4. #4
    TabPanel cannot contains hidden tab, you have to move Panel1 outside TabPanel and use ShowTab instead Hidden
     private void ShowTab()
        {
            tpControls.ShowTab(Panel1);                
        }
  5. #5

    Resolved

    Quote Originally Posted by Vladimir View Post
    TabPanel cannot contains hidden tab, you have to move Panel1 outside TabPanel and use ShowTab instead Hidden
     private void ShowTab()
        {
            tpControls.ShowTab(Panel1);                
        }
    It works now, thank you so much!

    Considering that
    TabPanel cannot contains hidden tab
    it seems to be a good idea to have an example of such case somewhere at https://examples2.ext.net/.

    Thanks again! This thread can be closed.
  6. #6
    Well, we have such example
    https://examples2.ext.net/#/TabPanel/Basic/Show_Hide/
    See Tab6

    Just in your case you cannot call UpdateContent for not rendered panel therefore need to mobe panel outside TabPanel

Similar Threads

  1. Replies: 2
    Last Post: May 09, 2013, 3:41 PM
  2. [CLOSED] panel icon missing when dynamically load a user control
    By CarpFisher in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Jul 30, 2012, 7:47 AM
  3. Replies: 0
    Last Post: May 16, 2012, 11:29 PM
  4. Replies: 2
    Last Post: Feb 06, 2012, 9:06 AM
  5. How to dynamically load user controls?
    By zikr in forum 1.x Help
    Replies: 0
    Last Post: Jan 23, 2009, 9:35 PM

Tags for this Thread

Posting Permissions