Closing Menu in OnClientItemClicked, re-opens

[LeBear]

Hello,

I'm currently prototyping a menu where I want a child menu item to make an Ajax call, alter the Image on the parent menu, and then close the parent menu.  Here is my menu:

<Telerik:RadMenu ID="Menu_gob" runat="server" Skin="Default" OnClientItemClicked="MenuItemClicked">
    <Items>
        <Telerik:RadMenuItem Value="AllTopics" Text="Top/All Topics" />
        <Telerik:RadMenuItem Value="CurrentTopic" Text="Page Lifecycle" ImageUrl="~/CABS_Images/Icon_NotSubscribed.png">
            <Items>
                <Telerik:RadMenuItem Value="CurrentTopicNewThread" Text="Start a New Thread" ImageUrl="~/CABS_Images/Icon_NewDocument.png" />
                <Telerik:RadMenuItem Value="CurrentTopicSubscription" Text="Turn ON Notifications" ImageUrl="~/CABS_Images/Icon_Subscribed.png" />
            </Items>
        </Telerik:RadMenuItem>
        <Telerik:RadMenuItem Value="CurrentThread" Text="NEW THREAD, 2, 3, 4..."  ImageUrl="~/CABS_Images/Icon_Subscribed.png">
            <Items>
                <Telerik:RadMenuItem Value="CurrentThreadNewPost" Text="Post a Reply" ImageUrl="~/CABS_Images/Icon_NewDocument.png" />
                <Telerik:RadMenuItem Value="CurrentThreadSubscription" Text="Turn OFF Notifications" ImageUrl="~/CABS_Images/Icon_NotSubscribed.png" />
            </Items>
        </Telerik:RadMenuItem>
        <Telerik:RadMenuItem Value="NewPost" Text="Post a Reply" ImageUrl="~/CABS_Images/Icon_NewDocument.png" />
        <Telerik:RadMenuItem Value="CannotPost" Text="This Thread is Read-Only" ImageUrl="~/CABS_Images/Icon_CannotPost.png" />
    </Items>
</Telerik:RadMenu>

I use the OnClientItemClicked event currently just to check the item being clicked, toggle the images, and close the menu.  There's no Ajax involvement yet.

<script language="javascript" type="text/javascript">
    var subbed_gbl = false;
    function MenuItemClicked(sender, args) {
        var clickedMenuItem = args.get_item();
        if (clickedMenuItem.get_value() == 'CurrentTopicSubscription') {
            var CurrentTopicMenuItem = $find("<%= Menu_gob.ClientID %>").findItemByValue('CurrentTopic');
            subbed_gbl = !subbed_gbl;
            if (subbed_gbl) {
                clickedMenuItem.set_imageUrl('<%= Application("ApplicationPath") %>/CABS_Images/Icon_NotSubscribed.png');
                clickedMenuItem.set_text('Turn Off Notifications');
                CurrentTopicMenuItem.set_imageUrl('<%= Application("ApplicationPath") %>/CABS_Images/Icon_Subscribed.png');
            } else {
                clickedMenuItem.set_imageUrl('<%= Application("ApplicationPath") %>/CABS_Images/Icon_Subscribed.png');
                clickedMenuItem.set_text('Turn On Notifications');
                CurrentTopicMenuItem.set_imageUrl('<%= Application("ApplicationPath") %>/CABS_Images/Icon_NotSubscribed.png');
            }
            //  CurrentTopicMenuItem.blur();
            //  CurrentTopicMenuItem.set_selected(false);
            //  CurrentTopicMenuItem.close();
            sender.close();
        }
    }
</script>

This works, except that immediately after the menu closes, it opens again.  As you can see, I've tried a few different things.  I've closed it, blurred it, un-selected it, and in various different orders.  I've done this by referencing both "sender" and "CurrentTopicMenuItem", which I programmatically set to the parent menu item.  None of them do the trick.  The menu always closes and then immediately opens again.

(Note that <%= Application("ApplicationPath") %> is just a way to reference the root of the web since it can vary from development to production.)

Can you help?

[Yana]

Hello LeBear,

Actually you don't need to close it manually, it will close as the item is clicked.

Kind regards,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[LeBear]

No, it doesn't.

I wouldn't have attempted to find code to close it if it did so automatically.  I also just checked this again to make sure.  I've updated the code that it calls an Ajax routine and doesn't attempt to close the menu at all.

Your answer would also beg the question, Why would adding code to close it cause it to close and re-open again?

Have you attempted to run the code I provided to see if you're seeing the same thing?

Thank you.

[Yana]

Hi LeBear,

I've tested the page, but I moved the mouse when I clicked the item and it was closed, I'm sorry for my confusion. The problem is that mouseover event bubbles up in Firefox and causes the item to expand again.
I've modified your page to show you how to fix this issue, please download the attached file and give it a try.

Best regard,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[LeBear]

That seems to have done the trick! 

Thank you very much!

[Lynn]

I don't see how this could work in a menu that has more than one (1) menu item that can open?  I have tried this with a menu that contains multiple menus and levels and cannot find anything to "search for" on the line of code below:

var

 

 

CurrentTopicMenuItem = $find("<%= Menu_gob.ClientID %>").findItemByValue('CurrentTopic')

It appears that this example was designed to only work on a menu that contains one item that opens, as in the example in the attached "menuclosing.zip" file.

This can be pretty frustrating.  I have a menu with many menus/items and some open a page with a target of "_blank".  When the user returns to the home page after clicking on one of these items that has a "_blank" target the menu is still open to the item the user clicked on.

Does anyone know how to close the menu when it contains items that open a "_blank" target?

Thanks in advance for any assistance!

Lynn

 

[Yana]

Hello Lynn,

This code is just an example, you can modify it according to your needs.  Could you please explain us in more details and also paste some sample code so we to be able to help you? Thanks

All the best,
Yana
the Telerik team