This is a migrated thread and some comments may be shown as answers.

RadMenu Auto-Expended

11 Answers 44 Views
Menu
This is a migrated thread and some comments may be shown as answers.
alex
Top achievements
Rank 1
alex asked on 17 Nov 2016, 09:46 AM

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,

11 Answers, 1 is accepted

Sort by
0
alex
Top achievements
Rank 1
answered on 18 Nov 2016, 01:41 AM

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

sorry for that

[quote]

THE MENU EXPEND ITSELF without clicking/mouseover

[/quote]

0
Ivan Danchev
Telerik team
answered on 18 Nov 2016, 06:44 AM
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.
0
alex
Top achievements
Rank 1
answered on 18 Nov 2016, 07:35 AM

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,

0
Ivan Danchev
Telerik team
answered on 22 Nov 2016, 02:56 PM
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.
0
alex
Top achievements
Rank 1
answered on 23 Nov 2016, 02:42 AM

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,

0
alex
Top achievements
Rank 1
answered on 24 Nov 2016, 02:55 AM
also appears on safari :(
0
Ivan Danchev
Telerik team
answered on 24 Nov 2016, 01:04 PM
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.
0
alex
Top achievements
Rank 1
answered on 28 Nov 2016, 03:54 AM

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
0
Ivan Danchev
Telerik team
answered on 29 Nov 2016, 03:11 PM
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.
0
alex
Top achievements
Rank 1
answered on 30 Nov 2016, 02:20 AM

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

0
Ivan Danchev
Telerik team
answered on 02 Dec 2016, 12:31 PM
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.
Tags
Menu
Asked by
alex
Top achievements
Rank 1
Answers by
alex
Top achievements
Rank 1
Ivan Danchev
Telerik team
Share this question
or