RadMenu Auto-Expended

12 posts, 0 answers
  1. alex
    alex avatar
    8 posts
    Member since:
    Sep 2016

    Posted 17 Nov 2016 Link to this post

    Hi there,

        i'm using RadMenu as sample on http://demos.telerik.com/aspnet-ajax/menu/examples/functionality/propertyexplorer/defaultcs.aspx,

    i'v added onClientItemClicked function to close menu after item clicked like this

    [code]

    function onClientItemClicked(sender, eventArgs) {
                    sender.close(true);
                }

    [/code]

    after it closed, i switch out to other window and switch back,

    [b]THE MENU EXPEND ITSELF without clicking/mouseover[/b]

    can anyone help me ?

    Thanks,

  2. alex
    alex avatar
    8 posts
    Member since:
    Sep 2016

    Posted 17 Nov 2016 in reply to alex Link to this post

    oh...when i say expend, i mean expand....

    sorry for that

    THE MENU EXPEND ITSELF without clicking/mouseover

  3. Ivan Danchev
    Admin
    Ivan Danchev avatar
    873 posts

    Posted 18 Nov 2016 Link to this post

    Hello Alex,

    While the Menu exposes a close() client-side method, it does not expose an open() one. However, the RadMenuItem object does expose an open() method and if called it opens the item's submenu displaying its child items (if any). Here's an example how the client-side API can be used to expand a specific item's submenu:
    <script>
        function expandMenu() {
            var menu = $find("<%=RadMenu1.ClientID %>");
            var item = menu.findItemByText("File");
            item.open();
        }
    </script>
    <div>
        <input type="button" name="name" value="Expand item" onclick="expandMenu()" />
        <br />
        <br />
        <telerik:RadMenu RenderMode="Lightweight" ID="RadMenu1" runat="server" EnableRoundedCorners="true" EnableShadows="true">
            <Items>
                <telerik:RadMenuItem Text="File" AccessKey="F">
                    <Items>
                        <telerik:RadMenuItem Text="New" AccessKey="w" />
                        <telerik:RadMenuItem Text="Open" AccessKey="O" />
                        <telerik:RadMenuItem IsSeparator="True" />
                        <telerik:RadMenuItem Text="Save" AccessKey="S" />
                        <telerik:RadMenuItem Text="Save As" AccessKey="A" />
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Edit" AccessKey="E">
                    <Items>
                        <telerik:RadMenuItem Text="Undo" AccessKey="U" />
                        <telerik:RadMenuItem IsSeparator="True" />
                        <telerik:RadMenuItem Text="Cut" AccessKey="T" />
                        <telerik:RadMenuItem Text="Copy" AccessKey="C" />
                        <telerik:RadMenuItem Text="Paste" AccessKey="P" />
                        <telerik:RadMenuItem Text="Clipboard..." AccessKey="b" />
                    </Items>
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenu>
    </div>

    If you want to expand an item when the window the Menu is nested in shows up, you can use the logic from the button's click handler in one of the Window's events, OnClientShow for example.

    Regards,
    Ivan Danchev
    Telerik by Progress
    Telerik UI for ASP.NET AJAX is ready for Visual Studio 2017 RC! Learn more.
  4. alex
    alex avatar
    8 posts
    Member since:
    Sep 2016

    Posted 18 Nov 2016 in reply to Ivan Danchev Link to this post

    Hi Ivan,

    Thanks for your reply.

    In my demo, when i clicked the menu, it opened correctly, after clicking the menu item, it was closed correctly. It works fine for the previous two actions.

    Then I switched to another window like VS and went back to original browser window, the menu was opened automatically.

    So I want to know how to prevent the menu re-open when switching back to original browser window? It is expected that the menu in the original browser window is in closed status.

    Thanks,

  5. Ivan Danchev
    Admin
    Ivan Danchev avatar
    873 posts

    Posted 22 Nov 2016 Link to this post

    Hello Alex,

    Thank you for the additional details.

    We can confirm that the reported behavior is due to a bug. After selecting an item the submenu closes but the Menu remains focused and auto-expands on switching back to the original browser tab. We logged this issue for fixing.

    Until the bug is fixed you can use the following workaround, which removes the focus from the Menu on browser tab switching:
    $telerik.$(window).blur(function () {
        $telerik.$(".RadMenu").trigger('blur');
    });

    The bug's status can be tracked on our Feedback Portal.

    I updated your Telerik points for reporting this issue.

    Regards,
    Ivan Danchev
    Telerik by Progress
    Telerik UI for ASP.NET AJAX is ready for Visual Studio 2017 RC! Learn more.
  6. alex
    alex avatar
    8 posts
    Member since:
    Sep 2016

    Posted 22 Nov 2016 in reply to Ivan Danchev Link to this post

    Hi Ivan,

    Thanks a lot.

    Once I applied your script, this issue was gone on Chrome, however, it still appear on IE.Is there anything I miss?

    Thanks,

  7. alex
    alex avatar
    8 posts
    Member since:
    Sep 2016

    Posted 23 Nov 2016 in reply to alex Link to this post

    also appears on safari :(
  8. Ivan Danchev
    Admin
    Ivan Danchev avatar
    873 posts

    Posted 24 Nov 2016 Link to this post

    Hello Alex,

    You can try a different approach that works in IE:

    Subscribe the Menu to the OnClientItemOpening event:
    <telerik:RadMenu ID="RadMenu1" runat="server" OnClientItemOpening="OnClientItemOpening" >

    Set a flag and cancel the opening event if its value is true:
    <script>
        var isBlur = false;
     
        $telerik.$(window).bind('blur', function () {
            isBlur = true;
        });
     
        function OnClientItemOpening(sender, args) {
            if (isBlur == true) {
                isBlur = false;
                $telerik.$(".RadMenu").trigger('blur');
                args.set_cancel(true);
            }
        }
    </script>

    Regards,
    Ivan Danchev
    Telerik by Progress
    Telerik UI for ASP.NET AJAX is ready for Visual Studio 2017 RC! Learn more.
  9. alex
    alex avatar
    8 posts
    Member since:
    Sep 2016

    Posted 27 Nov 2016 in reply to Ivan Danchev Link to this post

    Hi Ivan,

    It's still not working for IE.

    Once I applied your scripts, I can't close the menu. When I called sender.close(true) to close the menu, it expanded itself immediately.

    I'm going to add this issue to my known issue list until you guys fix it.

    Thanks anyway

    immediately
  10. Ivan Danchev
    Admin
    Ivan Danchev avatar
    873 posts

    Posted 29 Nov 2016 Link to this post

    Hello Alex,

    I attached a test page with the suggested workaround added and as shown in this short video at my end it prevents the submenu from re-opening in IE11.

    Regards,
    Ivan Danchev
    Telerik by Progress
    Telerik UI for ASP.NET AJAX is ready for Visual Studio 2017 RC! Learn more.
  11. alex
    alex avatar
    8 posts
    Member since:
    Sep 2016

    Posted 29 Nov 2016 in reply to Ivan Danchev Link to this post

    Hi Ivan,

    Thanks for the test.

    I'v tested your page, it does prevent the re-opening.

    In my case, I used click-to-close way to close the menu, and it still keep re-opening on IE.

    Here is my test page, could you please help me to test this?

    Thanks,

     

    It seems I can't upload a zip file, so I renamed it to jpg :D

  12. Ivan Danchev
    Admin
    Ivan Danchev avatar
    873 posts

    Posted 02 Dec 2016 Link to this post

    Hi Alex,

    The issue is caused by calling sender.close(true) too early. You need to call it with a slight delay that takes into account the submenu opening animation. In other words when a parent item is clicked before you close its submenu you need to wait for it to open first. It can be fixed with setting a timeout and delaying slightly the call to the close() method:
    function RadMenu1_clicked(sender, eventArgs) {
        var level = eventArgs.get_item().get_level();
        if (level > 0) {
            setTimeout(function () {
                sender.close(true);
            }, 200)
        }
    }


    Regards,
    Ivan Danchev
    Telerik by Progress
    Telerik UI for ASP.NET AJAX is ready for Visual Studio 2017 RC! Learn more.
Back to Top