Using Ext.NET v1.3, I need to ADD a User Control to each Tab dynamically...

Page 1 of 2 12 LastLast
  1. #1

    Using Ext.NET v1.3, I need to ADD a User Control to each Tab dynamically...

    Hi,
    I am trying to load my existing User Control to each Tab that is creating.

    I tried 'tab.LoadContent' but it doesn't seems to work. Please help.

    .cs
                var controller = new FormDetailsController();
                var lines = controller.GetLinesForBakery(CurrentBakeryId);
    
                int[] index = {1};
                foreach (var tab in lines.Select(line => new Panel
                                                               {
                                                                   ID = "TabBreadLine" + index[0], 
                                                                   AutoHeight = true, 
                                                                   Title = line.Description.Trim(),
                                                                   Padding = 6
                                                               }))
                {
                    tab.LoadContent(new LoadConfig("C:/DATA/Projects/Wildcat_v2/Web/UserControls/Runs.ascx", LoadMode.IFrame, true));
                    tab.Html = DateTime.Now.ToLongTimeString() + " Tab: " + index[0]; //Test 
                    tab.Render(TabBakeryLines, RenderMode.AddTo);
                    index[0]++;
                }
    .aspx
      <ext:TabPanel ID="TabBakeryLines" runat="server" AutoHeight="true" StyleSpec="padding-left:2px;" />
  2. #2

    ONLY the First Tab get loaded with my User Control, the rest are blank...

    Hi,
    Lets say I have four (4) lines, ONLY the first Tab loads up my User Control and the rest and just blank with my updated coded below.

    .cs
                        var lines = controller.GetLinesForBakery(CurrentBakeryId);
    
                        int[] index = {1};
                        foreach(var line in lines)
                        {
                            //* NEW Tab Panel */
                            var tab = new Panel
                            {
                                ID = "TabBreadLine" + index[0],
                                AutoHeight = true,
                                Title = line.Description.Trim(),
                                Padding = 6
                            };
    
                            var userControl = (UserControl)LoadControl("~/UserControls/Runs.ascx");
                            userControl.ID = "LineUserControl" + index[0];
                            tab.ContentControls.Add(userControl);
                            TabBakeryLines.Items.Add(tab);
                            index[0]++;
                        }
                        TabBakeryLines.Render();


    Quote Originally Posted by RonaldR View Post
    Hi,
    I am trying to load my existing User Control to each Tab that is creating.

    I tried 'tab.LoadContent' but it doesn't seems to work. Please help.

    .cs
                var controller = new FormDetailsController();
                var lines = controller.GetLinesForBakery(CurrentBakeryId);
    
                int[] index = {1};
                foreach (var tab in lines.Select(line => new Panel
                                                               {
                                                                   ID = "TabBreadLine" + index[0], 
                                                                   AutoHeight = true, 
                                                                   Title = line.Description.Trim(),
                                                                   Padding = 6
                                                               }))
                {
                    tab.LoadContent(new LoadConfig("C:/DATA/Projects/Wildcat_v2/Web/UserControls/Runs.ascx", LoadMode.IFrame, true));
                    tab.Html = DateTime.Now.ToLongTimeString() + " Tab: " + index[0]; //Test 
                    tab.Render(TabBakeryLines, RenderMode.AddTo);
                    index[0]++;
                }
    .aspx
      <ext:TabPanel ID="TabBakeryLines" runat="server" AutoHeight="true" StyleSpec="padding-left:2px;" />
  3. #3
    Hi,
    I believe the problem lies when I tried to load ALL the tabs with the same User Control and the ID are the same...

    Example, "A Control with an ID of "GridPanel1" has already been initialized. Please ensure that all Controls have a unique id."

    How do I Load & Upload a User Control when the user selects a different Tab ??

    Quote Originally Posted by RonaldR View Post
    Hi,
    Lets say I have four (4) lines, ONLY the first Tab loads up my User Control and the rest and just blank with my updated coded below.

    .cs
                        var lines = controller.GetLinesForBakery(CurrentBakeryId);
    
                        int[] index = {1};
                        foreach(var line in lines)
                        {
                            //* NEW Tab Panel */
                            var tab = new Panel
                            {
                                ID = "TabBreadLine" + index[0],
                                AutoHeight = true,
                                Title = line.Description.Trim(),
                                Padding = 6
                            };
    
                            var userControl = (UserControl)LoadControl("~/UserControls/Runs.ascx");
                            userControl.ID = "LineUserControl" + index[0];
                            tab.ContentControls.Add(userControl);
                            TabBakeryLines.Items.Add(tab);
                            index[0]++;
                        }
                        TabBakeryLines.Render();
  4. #4

    In my code behind, I creating an event to fire whenever another TAB becomes ACTIVE, but I get an error below:

    Hey,
    Error Message: "The control with ID 'TabBreadLine1' not found"

    BUT I don't understand why I get this error because I created this control...

    .cs
                        var lines = controller.GetLinesForBakery(CurrentBakeryId);
    
                        int[] index = { 1 };
                        foreach (var line in lines)
                        {
                            //* NEW Tab Panel */
                            var tab = new Panel
                                          {
                                              ID = "TabBreadLine" + index[0],
                                              AutoHeight = true,
                                              Title = line.Description.Trim(),
                                              Padding = 6
                                          };
    
                            if (index[0] == 1)
                            {
                                var userControl = (UserControl)LoadControl("~/UserControls/Runs.ascx");
                                userControl.ID = "LineUserControl" + index[0];
                                tab.ContentControls.Add(userControl);
                            }
    
                            tab.DirectEvents.Activate.Event += UpdateTimeStamp;
                            TabBakeryLines.Items.Add(tab);
                            index[0]++;
                        }
                        TabBakeryLines.Render();
    .cs
            protected void UpdateTimeStamp(object sender, DirectEventArgs e)
            {
                X.Msg.Notify("The Server Time is: ", DateTime.Now.ToLongTimeString()).Show();
            }


    Quote Originally Posted by RonaldR View Post
    Hi,
    I believe the problem lies when I tried to load ALL the tabs with the same User Control and the ID are the same...

    Example, "A Control with an ID of "GridPanel1" has already been initialized. Please ensure that all Controls have a unique id."

    How do I Load & Upload a User Control when the user selects a different Tab ??
  5. #5
    Hi,

    Any chance you could post a full .aspx sample which demonstrates the scenario? Something we could just copy/paste into our testing project and run without having to make modifications to your code.
    Geoffrey McGill
    Founder & CEO
  6. #6
    Thanks YOU for the quick response, here you go..

    Basically the goal here is to fire the event when the User Clicks on the TAB... (The time is just a TEST below)

    MY FINAL GOAL:
    Unload the User Control from the first TAB and load it to the ACTIVE TAB, if you can guide me on the second part, please help.
    .cs
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!X.IsAjaxRequest)
                {
                   try
                    {
                        var lines = new List<int>() {1, 2, 3, 4};
    
                        int[] index = { 1 };
                        foreach (var line in lines)
                        {
                            //* NEW Tab Panel */
                            var tab = new Panel
                                          {
                                              ID = "TabBreadLine" + index[0],
                                              AutoHeight = true,
                                              Title = "TabBreadLine" + index[0],
                                              Padding = 6
                                          };
    
                            tab.DirectEvents.Activate.Event += UpdateTimeStamp;
    
                            TabBakeryLines.Items.Add(tab);
                            index[0]++;
                        }
                        TabBakeryLines.Render();
                    }
    
                }
            }
    
            protected void UpdateTimeStamp(object sender, DirectEventArgs e)
            {
                X.Msg.Notify("The Server Time is: ", DateTime.Now.ToLongTimeString()).Show();
            }
    .aspx
        <ext:TabPanel ID="TabBakeryLines" runat="server" AutoHeight="true" EnableTabScroll="true"
            StyleSpec="padding-left:2px;" />

    Click image for larger version. 

Name:	Error.JPG 
Views:	87 
Size:	39.5 KB 
ID:	4247


    Quote Originally Posted by geoffrey.mcgill View Post
    Hi,

    Any chance you could post a full .aspx sample which demonstrates the scenario? Something we could just copy/paste into our testing project and run without having to make modifications to your code.
    Last edited by RonaldR; May 16, 2012 at 4:35 PM. Reason: Attaching an Image of Error
  7. #7

    I got it to work with Listener, but I need your help to Unload & Load the User Control to the ACTIVE TAB...

    My updated Code:

    .cs
    I replace this 
    
    tab.DirectEvents.Activate.Event += UpdateTimeStamp;
    with this
    tab.Listeners.Activate.Handler = "Ext.net.DirectMethods.UpdateTimeStamp();";
    [DirectMethod] public void UpdateTimeStamp() { X.Msg.Notify("The Server Time is: ", DateTime.Now.ToLongTimeString()).Show(); }

    Quote Originally Posted by RonaldR View Post
    Thanks YOU for the quick response, here you go..

    Basically the goal here is to fire the event when the User Clicks on the TAB... (The time is just a TEST below)

    MY FINAL GOAL:
    Unload the User Control from the first TAB and load it to the ACTIVE TAB, if you can guide me on the second part, please help.
    .cs
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!X.IsAjaxRequest)
                {
                   try
                    {
                        var lines = new List<int>() {1, 2, 3, 4};
    
                        int[] index = { 1 };
                        foreach (var line in lines)
                        {
                            //* NEW Tab Panel */
                            var tab = new Panel
                                          {
                                              ID = "TabBreadLine" + index[0],
                                              AutoHeight = true,
                                              Title = "TabBreadLine" + index[0],
                                              Padding = 6
                                          };
    
                            tab.DirectEvents.Activate.Event += UpdateTimeStamp;
    
                            TabBakeryLines.Items.Add(tab);
                            index[0]++;
                        }
                        TabBakeryLines.Render();
                    }
    
                }
            }
    
            protected void UpdateTimeStamp(object sender, DirectEventArgs e)
            {
                X.Msg.Notify("The Server Time is: ", DateTime.Now.ToLongTimeString()).Show();
            }
    .aspx
        <ext:TabPanel ID="TabBakeryLines" runat="server" AutoHeight="true" EnableTabScroll="true"
            StyleSpec="padding-left:2px;" />

    Click image for larger version. 

Name:	Error.JPG 
Views:	87 
Size:	39.5 KB 
ID:	4247
  8. #8
    The problem occurs because the Components are only being created during the initial request. When the 'tab' is rendered in the client, a second request is fired to call the 'UpdateTimeStamp' event handler. But, in ASP.NET, dynamically created Controls should be re-created in each request, and generally much earlier in the Page life-cycle, such as OnInit.

    The common saying is... "create early and create often".

    You can work around some of these issues by calling a [DirectMethod] instead of a DirectEvent. The following sample demonstrates the full scenario.

    Example

    <%@ Page Language="C#" %> 
    <%@ Import Namespace="System.Collections.Generic" %>
    <%@ Import Namespace="Panel=Ext.Net.Panel" %>
    
    
    <%@ Register Assembly="Ext.Net" TagPrefix="ext" Namespace="Ext.Net" %>
    
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                var lines = new List<int>() { 1, 2, 3, 4 };
    
    
                var index = 1;
                    
                foreach (var line in lines)
                {
                    //* NEW Tab Panel */
                    var tab = new Panel {
                        ID = "TabBreadLine" + index,
                        AutoHeight = true,
                        Title = "TabBreadLine" + index,
                        Padding = 6
                    };
    
    
                    tab.Listeners.Activate.Handler = "Ext.net.DirectMethods.DoSomething();";
                    //tab.DirectEvents.Activate.Event += UpdateTimeStamp;
    
    
                    TabBakeryLines.Items.Add(tab);
                    index += 1;
                }
                
                TabBakeryLines.Render();
            }
        }
    
    
        [DirectMethod]
        public void DoSomething()
        {
            X.Msg.Notify("The Server Time is: ", DateTime.Now.ToLongTimeString()).Show();
        }
        
        //protected void UpdateTimeStamp(object sender, DirectEventArgs e)
        //{
        //    X.Msg.Notify("The Server Time is: ", DateTime.Now.ToLongTimeString()).Show();
        //}
    </script>
    
    
    <html>
    <head>
        <title>Ext.NET Example</title>
    </head>
    <body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
         
        <ext:TabPanel 
            ID="TabBakeryLines" 
            runat="server" 
            AutoHeight="true" 
            EnableTabScroll="true"
            StyleSpec="padding-left:2px;" 
            />
    </form>
    </body>
    </html>
    Even though this sample does work, you will not have access to any of the 'tab' Components within the [DirectMethod] handler, because they do not exist in the second request.

    As well, please note the completeness of the above sample which only requires a simple copy/paste to test. No other code modifications are required in order to run this sample.

    The following two forum posts provide details on creating samples to post in the forums. Posting a sample which can be copy/paste into a test project will always get you a faster response.

    http://forums.ext.net/showthread.php...ing-New-Topics

    http://forums.ext.net/showthread.php...ation-Required
    Geoffrey McGill
    Founder & CEO
  9. #9
    Got it thanks, but my there lies my problem...

    You mention, "you will not have access to any of the 'tab' Components within the [DirectMethod] handler, because they do not exist in the second request."

    How would I UNLOAD the User Control from the First TAB and LOAD it up to the ACTIVE TAB ????

    Quote Originally Posted by geoffrey.mcgill View Post
    The problem occurs because the Components are only being created during the initial request. When the 'tab' is rendered in the client, a second request is fired to call the 'UpdateTimeStamp' event handler. But, in ASP.NET, dynamically created Controls should be re-created in each request, and generally much earlier in the Page life-cycle, such as OnInit.

    The common saying is... "create early and create often".

    You can work around some of these issues by calling a [DirectMethod] instead of a DirectEvent. The following sample demonstrates the full scenario.

    Example

    <%@ Page Language="C#" %> 
    <%@ Import Namespace="System.Collections.Generic" %>
    <%@ Import Namespace="Panel=Ext.Net.Panel" %>
    
    
    <%@ Register Assembly="Ext.Net" TagPrefix="ext" Namespace="Ext.Net" %>
    
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                var lines = new List<int>() { 1, 2, 3, 4 };
    
    
                var index = 1;
                    
                foreach (var line in lines)
                {
                    //* NEW Tab Panel */
                    var tab = new Panel {
                        ID = "TabBreadLine" + index,
                        AutoHeight = true,
                        Title = "TabBreadLine" + index,
                        Padding = 6
                    };
    
    
                    tab.Listeners.Activate.Handler = "Ext.net.DirectMethods.DoSomething();";
                    //tab.DirectEvents.Activate.Event += UpdateTimeStamp;
    
    
                    TabBakeryLines.Items.Add(tab);
                    index += 1;
                }
                
                TabBakeryLines.Render();
            }
        }
    
    
        [DirectMethod]
        public void DoSomething()
        {
            X.Msg.Notify("The Server Time is: ", DateTime.Now.ToLongTimeString()).Show();
        }
        
        //protected void UpdateTimeStamp(object sender, DirectEventArgs e)
        //{
        //    X.Msg.Notify("The Server Time is: ", DateTime.Now.ToLongTimeString()).Show();
        //}
    </script>
    
    
    <html>
    <head>
        <title>Ext.NET Example</title>
    </head>
    <body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
         
        <ext:TabPanel 
            ID="TabBakeryLines" 
            runat="server" 
            AutoHeight="true" 
            EnableTabScroll="true"
            StyleSpec="padding-left:2px;" 
            />
    </form>
    </body>
    </html>
    Even though this sample does work, you will not have access to any of the 'tab' Components within the [DirectMethod] handler, because they do not exist in the second request.

    As well, please note the completeness of the above sample which only requires a simple copy/paste to test. No other code modifications are required in order to run this sample.

    The following two forum posts provide details on creating samples to post in the forums. Posting a sample which can be copy/paste into a test project will always get you a faster response.

    http://forums.ext.net/showthread.php...ing-New-Topics

    http://forums.ext.net/showthread.php...ation-Required
  10. #10
    Quote Originally Posted by RonaldR View Post
    How would I UNLOAD the User Control from the First TAB and LOAD it up to the ACTIVE TAB ????
    I'm not really sure what this means? What is the UseCase for this scenario? You want to move the content of Tab1 to Tab2 when you click on Tab2?
    Geoffrey McGill
    Founder & CEO
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 0
    Last Post: May 16, 2012, 11:29 PM
  2. Replies: 2
    Last Post: Dec 08, 2011, 1:00 PM
  3. Replies: 0
    Last Post: May 03, 2010, 4:33 AM
  4. [CLOSED] Add Tab dynamically which contains user control
    By pschojer in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 04, 2009, 1:18 PM
  5. Dynamically loading a user control
    By kene in forum 1.x Help
    Replies: 0
    Last Post: Mar 16, 2009, 7:28 AM

Tags for this Thread

Posting Permissions