RadMenu Auto-Expended

[alex]

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,

[alex]

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

sorry for that

[quote]

THE MENU EXPEND ITSELF without clicking/mouseover

[/quote]

[Ivan Danchev]

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

[alex]

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,

[Ivan Danchev]

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

[alex]

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,

[alex]

also appears on safari :(

[Ivan Danchev]

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

[alex]

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

[Ivan Danchev]

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

[alex]

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

[Ivan Danchev]

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