Dynamically load user control on hidden tab

  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
  7. #7
    Quote Originally Posted by Vladimir View Post
    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
    Is this really similar example?

    <Bin>
    	<ext:Panel ID="Tab6" Title="Tab6" runat="server" Closable="true" CloseAction="Hide" Hidden="true" Html="PreHidden Tab6">
    		<Listeners>
    			<Close Handler="#{ShowTab6}.setDisabled(false);" />
    		</Listeners>
    	</ext:Panel>
    </Bin>
    <ext:Button ID="ShowTab6" runat="server" Text="Show Tab6">
    	<Listeners>
    		<Click Handler="#{TabPanel1}.addTab(#{TabPanel1}.bin[0]);this.setDisabled(true);" />
    	</Listeners>
    </ext:Button>
    At least, tab manipulations occur at the client side, not at the server.
    So this assumes that there is direct association between server side ShowTab() method and addTab() method on the client.
    This does not seem too obvious imho.

    If you could tell me, how to directly map client methods to a server side methods and vice versa - it would be much appreciated!

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