Closing Menu in OnClientItemClicked, re-opens

7 posts, 1 answers
  1. LeBear
    LeBear avatar
    233 posts
    Member since:
    May 2006

    Posted 23 Jan 2010 Link to this post

    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?


  2. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 26 Jan 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. LeBear
    LeBear avatar
    233 posts
    Member since:
    May 2006

    Posted 26 Jan 2010 Link to this post

    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.
  5. Answer
    Yana
    Admin
    Yana avatar
    4554 posts

    Posted 26 Jan 2010 Link to this post

    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.
  6. LeBear
    LeBear avatar
    233 posts
    Member since:
    May 2006

    Posted 26 Jan 2010 Link to this post

    That seems to have done the trick! 

    Thank you very much!
  7. Lynn
    Lynn avatar
    186 posts
    Member since:
    Sep 2006

    Posted 27 Dec 2010 Link to this post

    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

     

  8. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 03 Jan 2011 Link to this post

    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
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017