The official release of Ext.NET Mobile is now available. Ext.NET Mobile is an ASP.NET component framework for building Phone and Tablet specific mobile web applications. Read More

[FIXED] [#1466] [4.3.0] Keymap in gridpanel not working

  1. #1

    [FIXED] [#1466] [4.3.0] Keymap in gridpanel not working

    Are there any gotchas that would cause a keymap declaration inside a gridpanel to not work, i.e. The key press doesn't trigger the JavaScript function.

    I am talking about something like this:
    public class UserAdminAppWindow: Window
        {
            
            public UserAdminAppWindow() : base()
            {
                Title = "AdminTool";
                Icon = ext.Icon.User;
                Layout = "BorderLayout";
                ItemID = "userAdminAppWindow";
    
                var userGridPanel = new UserGridPanel() { Split = true };
    
    
    
                Items.Add(new ItemCollection()
                        {
                         new UserSearchWindow()
                            {
                                Hidden = true,
                                Modal = true,
                                ItemID = "userSearchWindow"
                            },
                            new UserEditFormWindow()
                            {
                                Hidden = true,
                                Modal = true,
                                ItemID = "userEditFormWindow"
                            },
                            userGridPanel,
                            new UserPermissionsDetailPanel(),                       
                        });
    
                KeyMap = new KeyMap()
                {
                    ItemID = "userAdminAppWindowKeyMap",
    
                    Target = "={Ext.isGecko ? Ext.getDoc() : Ext.getBody()}",
                    Binding =
                    {
    
                        new KeyBinding()
                        {
                        DefaultEventAction = EventAction.StopEvent,
                        Handler = "debugger;this.down('#userSearchButton').fireEvent('click')",
                        Keys =
                                {
                                    new Key() { Code = KeyCode.J }
                                }
                        }
                    }
                };
            }
        }
    When you declare a keymap as a property of a component does it explicitly take care of setting the target?

    Thanks
    Last edited by fabricio.murta; Aug 10, 2017 at 3:17 AM.
  2. #2
    Hello @tolgaerdogus!

    I see you instantiate your keymap in code behind. You set a target and all...

    But I don't see you bind the object to anywhere in the page... so it is just not emitted client-side at all.

    You should be adding it either to the page body, to a present component's list of items, something like that. I don't see you adding the grid panel to the page at all... If I assume you are actually adding the code you are instantiating to the client side, I can't see anything wrong, so I guess we'd better off if you provided a runnable test case so we could reproduce your issue and be able to give you advices about it.

    Not sure how to come up with a runnable example? Grab any example in our Examples Explorer as a starting point, they usually are 1-file examples (unless required), so it should do great!..

    More on simplifying runnable test cases we can provide you help with is here:
    Tips for creating simplified code samples

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    I have a self contained example project demonstrating the issue but it's 105MB with dlls. Where would you like me to upload it to?

    Thanks
  4. #4
    Hello, @tolgaerdogus!

    Please review the forum thread linked in our last response, we don't accept whole projects as test cases as so far none of them have proved useful to reproduce and solve issues. The test case should be simplified and posted here in [code][/code] blocks.

    This may sound annoying and challenging, but as soon as you make the first simplified example, the rest will be easy. And we will be effectively able to understand your issue and help you solve it.

    Besides, many times when you are simplifying the test case itself you can end up finding the reason or whether it is or is not related to Ext.NET (if it is not related to Ext.NET, we can't help much with the issue).
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Create clean Asp.Net project, install Ext.Net MVC nuget package and add/edit following files.
    In running app click the desktop module shortcut and in resulting blank window that pops up, hit the "J" key and expect that the debugger is triggered, however it's not...


    User.cs:

    using Ext.Net;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using ext = Ext.Net;
    
    namespace AdminToolWeb.ExtNet
    {
    
        public class UserAdminAppWindow: Window
        {
            
            public UserAdminAppWindow() : base()
            {
                Title = "AdminTool";
                Icon = ext.Icon.User;
                Layout = "BorderLayout";
                ItemID = "userAdminAppWindow";
    
                var userGridPanel = new GridPanel() { Split = true };
                
                Items.Add(new ItemCollection()
                        {
                         new Window()
                            {
                                Hidden = true,
                                Modal = true,
                                ItemID = "userSearchWindow"
                            },
                            new Window()
                            {
                                Hidden = true,
                                Modal = true,
                                ItemID = "userEditFormWindow"
                            },
                            userGridPanel,
                            //new UserPermissionsDetailPanel(),                       
                        });
    
                KeyMap = new KeyMap()
                {
                    ItemID = "userAdminAppWindowKeyMap",
    
                    Target = "={Ext.isGecko ? Ext.getDoc() : Ext.getBody()}",
                    Binding =
                    {
    
                        new KeyBinding()
                        {
                        DefaultEventAction = EventAction.StopEvent,
                        Handler = "debugger;",
                        Keys =
                                {
                                    new Key() { Code = KeyCode.J }
                                }
                        }
                    }
                };
            }
        }
    
    
        
    }
    MainApp.cs:
    using Ext.Net;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using ext = Ext.Net;
    
    namespace AdminToolWeb.ExtNet
    {
        public class Desktop
        {
            public static string RenderDesktop()
            {
                //var vp = new UserAdminApp();
                var vp = new TPCDesktop();
                return vp.ToScript();
            }
           
        }
    }
    Desktop.cs:
    using Ext.Net;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using ext = Ext.Net;
    
    
    namespace AdminToolWeb.ExtNet
    {
    
    
        public class TPCDesktop: ext.Desktop
        {
          
            protected UserAdminAppWindow adminToolWindow = new UserAdminAppWindow()
            {
                //Plain = true,
                //Padding = 10,
                Width = 1000,
                Height = 800,
                Title = "AdminTool",
                CloseAction = CloseAction.Destroy,
                Maximizable = true,
                Minimizable = true,
    
            };
            protected DesktopModule adminToolDesktopModule = new DesktopModule()
            {
                ModuleID = "AdminTool",
                AutoRun = false,
    
                Shortcut = new DesktopShortcut()
                {
                    Name = "Admin Tool",
                    SortIndex = 100,
                    IconCls = "x-im-shortcut",
    
                },
    
                Launcher = new MenuItem()
                {
                    Text = "Admin Tool",
                    Icon = Icon.User
                }
            };
    
            public TPCDesktop() : base()
            {
                ID = "Desktop1";
                Listeners.Ready.BroadcastOnBus = "App.Desktop.ready";
                adminToolDesktopModule.Window.Add(adminToolWindow);
                
    
    
                Modules.Add(adminToolDesktopModule);
    
                //Modules.Add(wikiDesktopModule);
    
                DesktopConfig = new DesktopConfig()
                {
                    Wallpaper = "",
                    ShortcutDragSelector = true,
    
                };
    
                StartMenu = new DesktopStartMenu()
                {
                    Title = "TimePayment Desktop",
                    Icon = Icon.Application,
                    Height = 300,
    
                };
                var toolbar = new Toolbar()
                {
                    Width = 100,
    
                };
                toolbar.Items.Add(new Button()
                {
                    Text = "Settings",
                    Icon = Icon.Cog
                });
                var logoutButton = new Button()
                {
                    Text = "Logout",
                    Icon = Icon.Key,
    
                };
                logoutButton.DirectEvents.Click.Action = "/Account/LogOff";
                logoutButton.DirectEvents.Click.EventMask.ShowMask = true;
                logoutButton.DirectEvents.Click.EventMask.Msg = "Good Bye...";
                logoutButton.DirectEvents.Click.EventMask.MinDelay = 300;
    
                toolbar.Items.Add(logoutButton);
                StartMenu.ToolConfig.Add(toolbar);
    
    
            }
        }
    }
    ExtNet/Index.cshtml:
    @using Ext.Net;
    @using Ext.Net.MVC;
    
    @model WebApplication1.Models.ExtNetModel
    
    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <title>Ext.NET MVC Sample</title>
    
        <link type="text/css" rel="stylesheet" href="http://speed.ext.net/www/intro/css/main.css" />
    </head>
    <body>
        @(Html.X().ResourceManager())
    
        <header></header>
        <script>
            @Html.Raw(AdminToolWeb.ExtNet.Desktop.RenderDesktop());
        </script>
    
    </body>
    </html>
  6. #6
    Hello!

    Thanks for your efforts simplifying the test case! I could run it here and reproduce the issue!

    But I believe you didn't really need all that to reproduce this issue as -- for what I found as the issue -- this is enough to reproduce it:

    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>61852 - Keymap not working</title>
    </head>
    <body>
        <div>
            @Html.X().ResourceManager().ScriptMode(Ext.Net.ScriptMode.Debug).SourceFormatting(true)
            @(
                Html.X().Window()
                    .Title("My Window")
                    .KeyMap(
                        Html.X().KeyMap()
                            .ItemID("userAdminAppWindowKeyMap")
                            .Target("={Ext.isGecko ? Ext.getDoc() : Ext.getBody()}")
                            .Binding(b => b.Add(
                                new KeyBinding()
                                {
                                    DefaultEventAction = EventAction.StopEvent,
                                    Handler = "debugger;",
                                    Keys =
                                    {
                                        new Key() { Code = KeyCode.J }
                                    }
                                }
                            ))
                    )
            )
        </div>
    </body>
    </html>
    As per current KeyMap documentation this KeyMap structure/object is completely wrong.

    In fact, the key mapping structure should just be a simple object with the key and a key's handler, although the documentation is very brief and does not make it clear how to, for example, bind key modifiers to a key press, as we can't just use any word as an object's key and some characters may even break the code.

    Anyway, I got it working on pure ExtJS and, even using the correct syntax, there seems to be something in Ext.NET preventing the keys from actually binding to the component. So, I logged this as an issue after #1466. We will need some time in order to figure out why exactly key binding is not working on Ext.NET at all.
    Last edited by fabricio.murta; Jul 04, 2017 at 1:51 AM.
  7. #7
    Something that I realized here reviewing your original post is that you want the key binding not restricted to that component, but for the whole page. For that you can use this instead of binding a component's KeyNav config (which is wrong, but by mistake and coincidence it accepted the object).

    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>61852 - Keymap not working</title>
    </head>
    <body>
        <div>
            @Html.X().ResourceManager().ScriptMode(Ext.Net.ScriptMode.Debug).SourceFormatting(true)
            @(Html.X().KeyMap()
                .ItemID("userAdminAppWindowKeyMap")
                .Target("={Ext.isGecko ? Ext.getDoc() : Ext.getBody()}")
                .Binding(b => b.Add(
                    new KeyBinding()
                    {
                        DefaultEventAction = EventAction.StopEvent,
                        Handler = "Ext.Msg.alert('key pressed', 'you pressed J')",
                        Keys =
                        {
                            new Key() { Code = KeyCode.J }
                        }
                    }
                ))
            )
        </div>
    </body>
    </html>
    This should do for your use case.
    Fabrício Murta
    Developer & Support Expert
  8. #8
    Fabricio,

    indeed I was able to make this work also through a global KeyMap, however I will have many instances of these windows in one desktop and would like the KeyMap declarations to know about the window instance in which the key was pressed, that's why I was trying to declare the KeyMap inside the window (or GridPanel in the window).

    In a global context of declaring a KeyMap (for the root document DOM object) how would you get the Ext.Net window object (inside of the handler) in which the "J" key was pressed?

    I am going to have many different kinds of windows with their own possibly different keyboard shortcuts and each type of window may have many instances (think of a customer service rep having two customer records open)...

    Thanks
  9. #9
    Alright, so you don't want this bit of the code:

    .Target("={Ext.isGecko ? Ext.getDoc() : Ext.getBody()}")
    Sorry, we'll have to investigate it further why it is not working from inside the component even using the right syntax.
    Fabrício Murta
    Developer & Support Expert
  10. #10
    Hello!

    We're posting this update here just to let whoever is looking forward to this feature that it has not only been fixed, but the fix is available on the publicly released Ext.NET version 4.3.0, launched this Monday!

    And we also adapted the key map example in examples explorer into an example to illustrate the usage of this specific intra-component key mapping definition method.

    WebForms: http://examples4.ext.net/#/Keys/KeyM...ide_Component/
    MVC: http://mvc4.ext.net/#/Keys_KeyMap/Map_Inside_Component/

    I hope the news come in a good time. Any issue or thought with this new keymap approach, we'd appreciate your feedback and report!

    Please notice this does not affect the old "standalone" keymap definition. It is just that defining a keymap from within a component takes a different syntax than using the ext:KeyMap targetting a given component. The original KeyMap examples are left untouched in both MVC and WebForms examples Explorers.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 6
    Last Post: Sep 04, 2012, 1:59 PM
  2. [CLOSED] KeyMap inside Panel not working
    By Fredrik in forum 2.x Premium Help
    Replies: 2
    Last Post: Apr 02, 2012, 2:51 PM
  3. [CLOSED] Tooltip and KeyMap is not working on htmlEditor
    By yobnet in forum 1.x Premium Help
    Replies: 2
    Last Post: May 25, 2010, 9:20 AM
  4. [CLOSED] KeyMap in Panel not working in mozilla
    By klavsm in forum 1.x Premium Help
    Replies: 3
    Last Post: Feb 17, 2010, 11:19 AM
  5. KeyMap not working for whole window
    By dbassett74 in forum 1.x Help
    Replies: 3
    Last Post: May 21, 2009, 2:55 PM

Posting Permissions