[CLOSED] UserControlLoader handling events define in User Control

Page 2 of 3 FirstFirst 123 LastLast
  1. #11
    So, I am getting the same thing, you click on the menu item and you get a thin line which I am assuming is the rendered control. Something is squashing it down... let me figure it out...
  2. #12
    Ok, take out the RenderToForm="true" from the menu item and it displays. So here is the code from a blank project. This shows the original problem of not being able to select the combo in the control, but has the event wired up, which I can not seem to do using the Control Loader.

    ControlLoaderMain.aspx
    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="ControlLoaderMain.aspx.vb" Inherits="ControlLoaderMain" %>
    <%@ Register TagPrefix="uc" TagName="QuickSearch" Src="~/ControlLoaderControl.ascx" %>
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <ext:ResourceManager ID="ResourceManager" runat="server" />
    
        <ext:Window ID="Window1" runat="server" Visible="true" Maximized="true" Padding="5" Resizable="true" MinHeight="700" MinWidth="500" Closable="false">
            <TopBar>
                <ext:Toolbar ID="Toolbar1" runat="server">
                    <Items>
    
                        <ext:Button ID="QuickLaunchReport" runat="server" Text="This does not work" >
                            <Menu>
                                <ext:Menu ID="QuickLaunchReportMenu" runat="server"  Width="450" ShowSeparator="false">
                                    <Items>
                                        <ext:Panel runat="server" Height="50" Border="true">
                                            <Content>
                                                <uc:QuickSearch ID="QuickSearch" runat="server" />
                                            </Content>
                                        </ext:Panel>
                                    </Items>
                                </ext:Menu>
                            </Menu>
                        </ext:Button>
    
                     </Items>
                </ext:Toolbar>
            </TopBar>
        </ext:Window>    
        </div>
        </form>
    </body>
    </html>
    ControlLoaderMain.aspx.vb
    
    Partial Class ControlLoaderMain
        Inherits System.Web.UI.Page
        Private Sub QuickSearch_Selected(sender As Object, e As ControlLoaderControl.QuickSearchEventArgs) Handles QuickSearch.Selected
    
            Ext.Net.X.AddScript("alert('test');")
        End Sub
    End Class
    ControlLoaderControl.ascx
    <%@ Control Language="VB" AutoEventWireup="false" CodeFile="ControlLoaderControl.ascx.vb" Inherits="ControlLoaderControl" %>
    
    <ext:Panel ID="outControl" runat="server" Height="100" Layout="FitLayout">
        <Items>
            <ext:ComboBox 
                ID="Results" 
                      runat="server"
                    FieldLabel="Select a single item"
                    DisplayField="name"
                    Width="320"
                    LabelWidth="130"
                    QueryMode="Local"
                    TypeAhead="true"        >
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Model>
                            <ext:Model runat="server" IDProperty="Value">
                                <Fields>
                                    <ext:ModelField Name="Text" />
                                    <ext:ModelField Name="Value" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <Items>
                    <ext:ListItem Text="TestingText1" Value="1" />
                    <ext:ListItem Text="Text" Value="2" />
                    <ext:ListItem Text="Text3" Value="3" />
                </Items>
                <DirectEvents>
                    <Select OnEvent="Results_Select">
                        <EventMask ShowMask="true" Target="Page" />
                        <ExtraParams>
                            <ext:Parameter Name="Key" Value="testing" Mode="Raw" />
                        </ExtraParams>
                    </Select>
                </DirectEvents>
             </ext:ComboBox>
        </Items>
    </ext:Panel>
    ControlLoaderControl.ascx.vb
    
    Partial Class ControlLoaderControl
        Inherits System.Web.UI.UserControl
        Public Event Selected As EventHandler
    
        Public Class QuickSearchEventArgs
            Inherits Ext.Net.DirectEventArgs
    
            Public SelectedEntity As String
    
            Public Sub New(extraParams As Ext.Net.ParameterCollection)
                MyBase.New(extraParams)
            End Sub
    
        End Class
    
        Public Sub Results_Select(ByVal sender As Object, ByVal e As Ext.Net.DirectEventArgs)
            Dim params As New Ext.Net.ParameterCollection()
            params.Add(New Ext.Net.Parameter("SameWindow", True))
            Dim args As New QuickSearchEventArgs(params) With {
                        .SelectedEntity = "x"
                        }
            RaiseEvent Selected(Me, args)
        End Sub
    End Class
  3. #13
    Hello!

    I set up the test case here, but how am I supposed to check the event triggering if I can't select an entry from the combo box? Is the combo box really required to be inside the menu (or the toolbar for what matters) to demonstrate the event trigger working at all?

    I didn't find any 'RenderToForm="true"' on your test case to remove either, so I figure you already removed it and it was supposed to be working but... The way it is I can not even see the combo box's dropdown list to select something so that the event triggers.

    I understand we have a limitation where controls can't be added inside menus and toolbars (yes, toolbars too) inside a <Content> tag. And wrapping the tag in other component (like a Panel) is known not to work, but I believe this is not the point in this thread.

    Wouldn't it be possible to reproduce the issue if we just had a page with simply the combo box (added as you are doing, via <uc:QuickSearch />) and then try to add the same component using the <ext:UserControlLoader />? Maybe even having both components in the same page will be enough to demonstrate the issue...
    Fabrício Murta
    Developer & Support Expert
  4. #14
    Yes, the code that I posted fixes it so now you see the dropdown... so let me back up. The original problem is that you can't select the dropdown when it is inside of a usercontrol in a <content> block. So the fix was to use a UserControlLoader, which fixes the problem of not being able to select the combo box. However in making this change I lose the ability to wire up the event that I am throwing from the control. Sure there are simple ways to accomplish something similar, but I am trying to distill a very complex page that is part of a much more complex application into an example that displays the problem.

    So if I take the example that I just posted and change the <content> to use a UserControlLoader, so change:

         <Content>
             <uc:QuickSearch ID="QuickSearch" runat="server" />
         </Content>
    to this:

     <Items>
        <ext:UserControlLoader runat="server" ID="UCQuickSearch" Path="ControlLoaderControl.ascx">    </ext:UserControlLoader>  
     </Items>
    How do I wire up the event handler to handle the event thrown from the usercontrol? ie this code from when I use the <content> method:

        Private Sub QuickSearch_Selected(sender As Object, e As ControlLoaderControl.QuickSearchEventArgs) Handles QuickSearch.Selected
            Ext.Net.X.AddScript("alert('test');")
        End Sub
    Last edited by rmelancon; Jan 20, 2017 at 12:43 PM.
  5. #15
    Maybe this will help, in my example I can get to the actual usercontrol, via the loader by accessing for instance on the UserControlAdded event, the property UCQuickSearch.Controls(1). So that is the Control that I then need to add the handler for the "Selected" event. So if there were something like UCQuickSearch.Control(1).AddEventHandler.
  6. #16
    Hello @rmelancon!

    What I'm trying to say is, wouldn't something like this be enough to elucidate the test case, to clearly show what the problem is and how to reproduce it?

    Please notice, my project name & namespace is ExtNetplaygrondMVC4vb_NuGet, and the file names used precede the code blocks below:

    ASPX markup: 61701-2-page.aspx
    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="61701-2-page.aspx.vb" Inherits="ExtNetplaygroundMVC4vb_NuGet._60701_2_page" %>
    
    <%@ Register Src="~/aspEngine/06/1/61701-2-userControl.ascx" TagName="ComboControl" TagPrefix="uc" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <ext:ResourceManager ID="ResourceManager" runat="server" />
                <ext:Panel runat="server" Title="Event wired" Height="100" Width="400" Border="true">
                    <Content>
                        <uc:ComboControl ID="QuickSearch" runat="server" />
                    </Content>
                </ext:Panel>
                <ext:Panel runat="server" Title="Can't wire event" Height="100" Width="400" Border="true">
                    <Items>
                        <ext:UserControlLoader runat="server" ID="QuickSearchExt" Path="61701-2-userControl.ascx" />
                    </Items>
                </ext:Panel>
            </div>
        </form>
    </body>
    </html>
    ASPX code behind: 61701-2-page.aspx.vb
    Public Class _60701_2_page
        Inherits System.Web.UI.Page
    
    '    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    
    '    End Sub
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    
        End Sub
    
        Private Sub QuickSearch_Selected(sender As Object, e As _61701_2_userControl.QuickSearchEventArgs) Handles QuickSearch.Selected
    
            Ext.Net.X.AddScript("alert('quicksearch selected triggered');")
        End Sub
    
    End Class
    Custom control ASCX markup: 61701-2-userControl.ascx
    <%@ Control Language="vb" AutoEventWireup="false" CodeBehind="61701-2-userControl.ascx.vb" Inherits="ExtNetplaygroundMVC4vb_NuGet._61701_2_userControl" %>
    
    <ext:ComboBox 
        ID="Results" 
        runat="server"
        FieldLabel="Select a single item"
        DisplayField="Text"
        LabelWidth="130"
        QueryMode="Local"
        TypeAhead="true">
        <Items>
            <ext:ListItem Text="TestingText1" Value="1" />
            <ext:ListItem Text="Text" Value="2" />
            <ext:ListItem Text="Text3" Value="3" />
        </Items>
        <DirectEvents>
            <Select OnEvent="Results_Select">
                <EventMask ShowMask="true" Target="Page" />
                <ExtraParams>
                    <ext:Parameter Name="Key" Value="testing" />
                </ExtraParams>
            </Select>
        </DirectEvents>
    </ext:ComboBox>
    User control code behind: 61701-2-userControl.ascx.vb
    Public Class _61701_2_userControl
        Inherits System.Web.UI.UserControl
    
        'Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    
        'End Sub
    
        Public Event Selected As EventHandler
    
        Public Class QuickSearchEventArgs
            Inherits Ext.Net.DirectEventArgs
    
            Public SelectedEntity As String
    
            Public Sub New(extraParams As Ext.Net.ParameterCollection)
                MyBase.New(extraParams)
            End Sub
    
        End Class
    
        Public Sub Results_Select(ByVal sender As Object, ByVal e As Ext.Net.DirectEventArgs)
            Dim params As New Ext.Net.ParameterCollection()
            params.Add(New Ext.Net.Parameter("SameWindow", True))
            Dim args As New QuickSearchEventArgs(params) With {
                .SelectedEntity = "x"
            }
            RaiseEvent Selected(Me, args)
        End Sub
    End Class
    We've been two pages long on this thread and still couldn't get up to a runnable test case. If this is enough to reproduce the issue you are talking about, let us know. We really want to help but unless we can get to a simplified test case reproducing the specific issue we want to tackle, most times we can't be of much help.
    Last edited by fabricio.murta; Jan 21, 2017 at 4:36 PM.
  7. #17
    Yes, that is fine. That is the problem I need help with. How do I wire an event handler to the event thrown by a user control injected into the page via the ext.net <UserControlLoader> component.
  8. #18
    Hello @rmelancon

    Thanks for confirming, we are investigating this still, hope we don't have more delays on giving you a proper feedback until tomorrow!

    At first as a component is enclosing the other component, I believe some casting (getting the inner component from the UserControlLoader) should take place in order for this to work. When you try the ID, there's no select event just because the UserControlLoader is not the user control itself, it is the "shell" of the custom control.
    Fabrício Murta
    Developer & Support Expert
  9. #19
    Hello again @rmelancon!

    I'm afraid using the UserControlLoader component will add dynamics to the page that will disallow directly wiring events to the component. But you can fairly simplify the code for something that works with another approach that might just work for you!

    The catch is to use Direct Methods instead. It will save you the trouble of getting the extra parameters by extending the DirectEventArgs class with specialized code. Here is the sample above rewritten to use this approach:

    ASPX markup: 61701-2-page.aspx
    <%@ Page Language="vb" %>
    
    <%@ Register Src="61701-2-userControl.ascx" TagName="ComboControl" TagPrefix="uc" %>
    
    <script runat="server">
        <Ext.Net.DirectMethod()>
        Sub QuickSearch_Selected(selectedValue As String)
            Ext.Net.X.AddScript("alert('quicksearch DirectMethod select event triggered with value: " & selectedValue & "');")
        End Sub
    </script>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <ext:ResourceManager ID="ResourceManager" runat="server" />
                <ext:Panel runat="server" Title="Event wired" Height="100" Width="400" Border="true">
                    <Content>
                        <uc:ComboControl ID="QuickSearch" runat="server" />
                    </Content>
                </ext:Panel>
                <ext:Panel runat="server" Title="Now works too!" Height="100" Width="400" Border="true">
                    <Items>
                        <ext:UserControlLoader runat="server" ID="QuickSearchExt" Path="61701-2-userControl.ascx" UserControlID="QuickSearchInner" />
                    </Items>
                </ext:Panel>
            </div>
        </form>
    </body>
    </html>
    Custom Control ASCX markup: 61701-2-userControl.ascx
    <%@ Control Language="vb" %>
    
    <ext:ComboBox 
        ID="Results" 
        runat="server"
        FieldLabel="Select a single item"
        DisplayField="Text"
        LabelWidth="130"
        QueryMode="Local"
        TypeAhead="true">
        <Items>
            <ext:ListItem Text="TestingText1" Value="1" />
            <ext:ListItem Text="Text" Value="2" />
            <ext:ListItem Text="Text3" Value="3" />
        </Items>
        <Listeners>
            <%-- Only makes the call if the direct method is defined on the current page. --%>
            <Select Handler="if (App.direct && App.direct.QuickSearch_Selected) App.direct.QuickSearch_Selected('testing');" />
        </Listeners>
    </ext:ComboBox>
    Notice there's no need for specific/static code behind anymore in this approach. At least as far as this code sample is concerned, this significantly simplifies the code. You can, instead of using a long Handler= in your listener, bind a Fn= and ensure you have this javascript function defined on the main page. This will allow you to draw more complex code (to fetch the parameter you want to pass to code behind, for example) with syntax highlighting in Visual Studio and nicer debugging either with Visual Studio or browser's developer tools.

    If you are really requiring a solution where you hardwire the event to code behind, I'm afraid we have a deadlock here:
    - using toolbar or menus is not compatible with the Content blocks. Must use Items instead.
    - wrapping the Content block under a Panel or Container inside toolbar or menus' Items block breaks the hit box on menus at least
    - to use a custom control in an Items block, you need the UserControlLoader component wrapper.
    - the UserControlLoader component adds dynamics to the page which renders code behind event wiring not feasible (at the least) to be implemented.

    The references are these three posts in the forums:
    - Daniil, Aug 19, 2015 (which references the other two)
    - Vladimir, Jun 24, 2011
    - Daniil, Mar 20, 2013

    There may be more if you do a search for UserControlLoader in the forums but, I believe at least the last two above suffice.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  10. #20
    Thanks for the update. I got the example working with your changes but when integrating back into the actual code, the direct event never fires. I can't fight with this any longer so I just put the control in a separate window in a content tag and tried to make it look as close to the "original" in menu version. At least it works like it used to even though it looks and feels a bit different to the users.

    Unfortunately the upgrade from ext 2.x to 4.x is presenting more breaking changes than we were expecting.
    Last edited by rmelancon; Jan 24, 2017 at 7:34 PM.
Page 2 of 3 FirstFirst 123 LastLast

Similar Threads

  1. Code behind content handling (from client events)
    By fabricio.murta in forum 2.x Help
    Replies: 5
    Last Post: Oct 22, 2014, 6:26 AM
  2. Replies: 1
    Last Post: Sep 28, 2014, 7:36 AM
  3. Replies: 3
    Last Post: Sep 05, 2013, 8:18 AM
  4. Replies: 1
    Last Post: Jan 28, 2013, 5:26 AM
  5. [CLOSED] Direct events in user control
    By tiramisu in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Dec 13, 2010, 11:34 AM

Posting Permissions