[CLOSED] Event handlers on controls inside a UserControl that was added dynamically

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Event handlers on controls inside a UserControl that was added dynamically

    I have a Page that has two tabs, when you click on the second tab it dynamically loads a user control (assigns ID="TestChild") with a select drop down control, into the tab. The select box (ID=FirmViewBySelect) has a directevent for the "select" event. The loading of the control works fine but when you select an item from a drop down, you get an error saying "the control with ID 'TestChild_FirmViewBySelect' not found. So in the dynamic loading of the control it is assigning a new control ID to the select box. So I kind of understand what is happening but not sure how to fix it. The "parent" page is PerformanceTest2.aspx:

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="PerformanceTest2.aspx.vb" Inherits="WAP.Web.Advisor.PerformanceTest2" %>
    <!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></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
           <ext:TabPanel ID="myPanel" runat="server" Height="200" Border="false" >
                <Items>
                    <ext:Panel ID="PerformancePanel" runat="server" Title="Performance" Header="false" Border="false">
                        <TopBar>
                            <ext:Toolbar ID="Toolbar4" runat="server">
                                <Items>
                                    <ext:Button ID="ButtonRobb" runat="server" Icon="PlayGreen" > 
                                    </ext:Button>
                                </Items>
                            </ext:Toolbar>
                        </TopBar>
                    </ext:Panel>
                    <ext:Panel ID="SummaryPanel" runat="server" Title="Firm Summary" Height="200" Border="TRUE">
                        <Content></Content>
                        <DirectEvents>
                            <Activate OnEvent="SummaryPanel_Activate">
                                <EventMask ShowMask="true" Msg="Loading Panel" Target="Page" />
                            </Activate>
                        </DirectEvents>
                    </ext:Panel>
    
                </Items>
            </ext:TabPanel>
        </form>
    </body>
    </html>
    code behind:
    Imports Ext.Net
    Public Class PerformanceTest2
        Inherits System.Web.UI.Page
    
        Protected Sub SummaryPanel_Activate(ByVal sender As Object, ByVal e As DirectEventArgs)
            Dim fs = Page.LoadControl("~/TestChild1.ascx")
            fs.ID = "TestChild"
            SummaryPanel.ContentControls.Add(fs)
            SummaryPanel.UpdateContent()
        End Sub
    
    End Class
    child control: TestChild1.ascx

    
    <%@ Control Language="vb" AutoEventWireup="false" CodeBehind="TestChild1.ascx.vb" Inherits="WAP.Web.Advisor.TestChild1" %>
            <ext:Panel ID="SummaryPanel" runat="server" Border="false" Height="200">
                <TopBar>
                    <ext:Toolbar ID="ToolbarFirmSummary" runat="server" HideBorders="true">
                        <Items>
                            <ext:ButtonGroup ID="ButtonGroup2" runat="server" Title="View By" Height="68">
                                <Items>
                                    <ext:TableLayout ID="TableLayout3" runat="server" Columns="3">
                                        <Cells>
                                            <ext:Cell>
                                                <ext:SelectBox ID="FirmViewBySelect" runat="server" Editable="false" Width="185" ValueField="myID" DisplayField="myDescription">
                                                    <Store>
                                                        <ext:Store ID="StoreFirmViewBy" runat="server">
                                                            <Reader>
                                                                <ext:JsonReader IDProperty="myID">
                                                                    <Fields>
                                                                        <ext:RecordField Name="myID" />
                                                                        <ext:RecordField Name="myDescription" />
                                                                    </Fields>
                                                                </ext:JsonReader>
                                                            </Reader>
                                                        </ext:Store>
                                                    </Store>
                                                    <DirectEvents>
                                                        <Select OnEvent="FirmViewBy_Select">
                                                            <EventMask ShowMask="true" Msg="Loading Related Views" Target="Page" />
                                                        </Select>
                                                    </DirectEvents>
    
                                                </ext:SelectBox>
                                            </ext:Cell>
                                            <ext:Cell>
                                                <ext:Button ID="Button_FirmExecute" runat="server" Text="Execute" Disabled="true" Icon="PlayGreen" Height="38" Width="90">
                                                    <DirectEvents>
                                                        <Click OnEvent="Button_FirmExecute_Click">
                                                            <EventMask ShowMask="true" Msg="Gathering Data" Target="Page" />
                                                        </Click>
                                                    </DirectEvents>
                                                </ext:Button>
                                            </ext:Cell>
                                        </Cells>
                                    </ext:TableLayout>
                                </Items>
                                </ext:ButtonGroup>
                            </Items>
                        </ext:Toolbar>
                    </TopBar>
                </ext:Panel>
    code behind:
    Imports Ext.Net
    
    Public Class TestChild1
        Inherits System.Web.UI.UserControl
    
        Protected Sub FirmViewBy_Select(ByVal sender As Object, ByVal e As DirectEventArgs)
        End Sub
        Protected Sub Button_FirmExecute_Click(ByVal sender As Object, ByVal e As DirectEventArgs)
        End Sub
    
        Private Sub Page_Init(sender As Object, e As System.EventArgs) Handles Me.Init
    
            Dim someData As New Collection
            Dim xdata As New testData
            With xdata
                .myID = 1
                .myDescription = "One"
            End With
            someData.Add(xdata)
            StoreFirmViewBy.DataSource = someData
            StoreFirmViewBy.DataBind()
    
        End Sub
    
        Private Class testData
            Private _myID As Integer
            Public Property myID() As Integer
                Get
                    Return _myID
                End Get
                Set(ByVal value As Integer)
                    _myID = value
                End Set
            End Property
            Private _myDescription As String
            Public Property myDescription() As String
                Get
                    Return _myDescription
                End Get
                Set(ByVal value As String)
                    _myDescription = value
                End Set
            End Property
    
        End Class
    End Class
    Last edited by Daniil; Aug 02, 2011 at 2:03 PM. Reason: [CLOSED]
  2. #2
    Also, following the direction of some of the other threads on this topic, have tried moving the DirectEvent into the Page_Init via:

           AddHandler FirmViewBySelect.DirectEvents.Select.Event, AddressOf FirmViewBy_Select
    but same behavior.
  3. #3
    Hi,

    Asp.Net doesn't recreate controls automatically, it is a stateless system.

    So, to use DirectEvents for the dynamic control you should recreate that control during each DirectEvent requests (for example, within Page_Load).

    Another way is using DirectMethod isntead of DirectEvent. DirectMethod doesn't require a control instance, but DirectEvent does require.
  4. #4
    Not sure I understand, so within the Page_Load of the parent control (PerformanceTest2.aspx) call Page.LoadControl with the child (TestChild1.aspx)?

    Doing that would negate my purpose of dynamically loading the control on the activate of the tab. I don't want the control loaded unless the user clicks on that tab.

    Again maybe I am misunderstanding, my other interpretation of your response would be to dynamically create the SelectBox on the Page_Load of the child?
  5. #5
    I said just that you should recreate a control if you want to use its DirectEvents.

    DirectEvent requires a control instance. But during some DirectEvent a page knows nothing about a control which was created and rendered previously during another DirectEvent. Hope this helps.

    Repeat myself, I'd suggest you to just use DirectMethod instead of DirectEvent.
  6. #6
    Do I need to change the DirectEvents to DirectMethods in the parent page, child page or both?
  7. #7
    Only for the dynamic control (-s) which causes the problem.
  8. #8
    Ok, so I changed the childs controls to use direct method and now I get an error "Control with ID "TestChild" not found"

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="PerformanceTest2.aspx.vb" Inherits="WAP.Web.Advisor.PerformanceTest2" %>
    <!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></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
           <ext:TabPanel ID="myPanel" runat="server" Height="200" Border="false" >
                <Items>
                    <ext:Panel ID="PerformancePanel" runat="server" Title="Performance" Header="false" Border="false">
                        <TopBar>
                            <ext:Toolbar ID="Toolbar4" runat="server">
                                <Items>
                                    <ext:Button ID="ButtonRobb" runat="server" Icon="PlayGreen" > 
                                    </ext:Button>
                                </Items>
                            </ext:Toolbar>
                        </TopBar>
                    </ext:Panel>
                    <ext:Panel ID="SummaryPanel" runat="server" Title="Firm Summary" Height="200" Border="TRUE">
                        <Content></Content>
                        <DirectEvents>
                            <Activate OnEvent="SummaryPanel_Activate">
                                <EventMask ShowMask="true" Msg="Loading Panel" Target="Page" />
                            </Activate>
                        </DirectEvents>
                    </ext:Panel>
                </Items>
            </ext:TabPanel>
        </form>
    </body>
    </html>
    Imports Ext.Net
    Public Class PerformanceTest2
        Inherits System.Web.UI.Page
    
        Protected Sub SummaryPanel_Activate(ByVal sender As Object, ByVal e As DirectEventArgs)
            Dim fs = Page.LoadControl("~/TestChild1.ascx")
            fs.ID = "TestChild"
            SummaryPanel.ContentControls.Add(fs)
            SummaryPanel.UpdateContent()
        End Sub
    End Class
    <%@ Control Language="vb" AutoEventWireup="false" CodeBehind="TestChild1.ascx.vb" Inherits="WAP.Web.Advisor.TestChild1" %>
            <ext:Panel ID="SummaryPanel" runat="server" Border="false" Height="200">
                <TopBar>
                    <ext:Toolbar ID="ToolbarFirmSummary" runat="server" HideBorders="true">
                        <Items>
                            <ext:ButtonGroup ID="ButtonGroup2" runat="server" Title="View By" Height="68">
                                <Items>
                                    <ext:TableLayout ID="TableLayout3" runat="server" Columns="3">
                                        <Cells>
                                            <ext:Cell>
                                                <ext:SelectBox ID="FirmViewBySelect" runat="server" Editable="false" Width="185" ValueField="myID" DisplayField="myDescription">
                                                    <Store>
                                                        <ext:Store ID="StoreFirmViewBy" runat="server">
                                                            <Reader>
                                                                <ext:JsonReader IDProperty="myID">
                                                                    <Fields>
                                                                        <ext:RecordField Name="myID" />
                                                                        <ext:RecordField Name="myDescription" />
                                                                    </Fields>
                                                                </ext:JsonReader>
                                                            </Reader>
                                                        </ext:Store>
                                                    </Store>
                                                    <Listeners>
                                                        <Select Handler="#{DirectMethods}.FirmViewBy_Select();" />
                                                    </Listeners>
                                                </ext:SelectBox>
                                            </ext:Cell>
                                        </Cells>
                                    </ext:TableLayout>
                                </Items>
                                </ext:ButtonGroup>
                            </Items>
                        </ext:Toolbar>
                    </TopBar>
                </ext:Panel>
    Imports Ext.Net
    
    Public Class TestChild1
        Inherits System.Web.UI.UserControl
        <DirectMethod()> _
        Public Sub FirmViewBy_Select()
    
        End Sub
        Private Sub Page_Init(sender As Object, e As System.EventArgs) Handles Me.Init
    
            Dim someData As New Collection
            Dim xdata As New testData
            With xdata
                .myID = 1
                .myDescription = "One"
            End With
            someData.Add(xdata)
            StoreFirmViewBy.DataSource = someData
            StoreFirmViewBy.DataBind()
        End Sub
        Private Class testData
            Private _myID As Integer
            Public Property myID() As Integer
                Get
                    Return _myID
                End Get
                Set(ByVal value As Integer)
                    _myID = value
                End Set
            End Property
            Private _myDescription As String
            Public Property myDescription() As String
                Get
                    Return _myDescription
                End Get
                Set(ByVal value As String)
                    _myDescription = value
                End Set
            End Property
    
        End Class
    End Class
  9. #9
    If you define DirectMethod inside control then control still must be recreated otherwise we have no ability to find direct method handler during another request

    I suggest to read about dynamic ASP.NET controls to understand why dynamic controls must be recreated for correct event handling (in interenet there are many articles about dynamic controls)
  10. #10
    What do you mean by "recreate the control"? Do you mean go through the whole LoadControl, set ID, databind, add to panel, render process? Or is it sufficient to just do FindControl? From what you've said, I can't see how anyone would want to load controls dynamically. It just seems like too much of a headache.

    Are there any other strategies for deferring the loading until the control is shown? (in this case, when the tab is clicked)
    We're just trying to cut down on how much work is being done on the initial page load.
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] dynamically added custom controls not rendered in fieldset
    By AnulekhaK in forum 1.x Legacy Premium Help
    Replies: 25
    Last Post: Feb 24, 2012, 2:58 PM
  2. Iteration on dynamically added controls
    By kutlu in forum 1.x Help
    Replies: 1
    Last Post: Jan 02, 2011, 7:14 PM
  3. Replies: 12
    Last Post: Jan 01, 2011, 1:36 AM
  4. [CLOSED] [1.0] removing dynamically added controls
    By webclouder in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Dec 29, 2010, 7:49 PM

Tags for this Thread

Posting Permissions