Close RadMenu on client click

6 posts, 1 answers
  1. lchesnais
    lchesnais avatar
    39 posts
    Member since:
    Feb 2007

    Posted 19 Sep 2008 Link to this post

    Hello,

    When I click on a RadMenuItem of a regular RadMenu (not context menu), the menu is not closed.
    I try to add some code in the ItemClicked event :
    sender.close();
    or even:
    setTimeout(function() {sender.close();}
    But it doesn't work since the menu is reopened just after the close because of a delayed event.

    Does anybody have an idea.

    Thanks in advance.

    BR, Laurent

    <%@ Page Language="C#" %> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <script runat="server">  
     
    </script> 
     
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head runat="server">  
        <title></title>  
        <script type="text/javascript">  
            function rmMode_ItemClicked(sender, args)  
            {  
                sender.close();  
            }  
        </script> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
        <div> 
            <telerik:RadScriptManager  
                    id="RSM" 
                    runat="server" 
                    > 
            </telerik:RadScriptManager> 
            <telerik:RadMenu  
                    id="rmMode" 
                    runat="server" 
                    Flow="Horizontal" 
                    OnClientItemClicked="rmMode_ItemClicked" 
                    width="100px" 
                    > 
                    <Items> 
                        <telerik:RadMenuItem  
                                Text="Menu" 
                                > 
                            <Items> 
                                <telerik:RadMenuItem Text="Item1" Value="1" /> 
                                <telerik:RadMenuItem Text="Item2" Value="1" /> 
                            </Items> 
                        </telerik:RadMenuItem> 
                    </Items> 
            </telerik:RadMenu> 
        </div> 
        </form> 
    </body> 
    </html> 
  2. Answer
    Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 19 Sep 2008 Link to this post

    Hello lchesnais,

    You can try disabling the collapse animation by setting its type to None.

    Regards,
    Albert
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. lchesnais
    lchesnais avatar
    39 posts
    Member since:
    Feb 2007

    Posted 20 Sep 2008 Link to this post

    Hello Albert,

    Thank you, it works perfectly!

    BR, Laurent

    PS: Here is the final code that works as expected :when an item is clicked, the menu is closed. (Of course, in this sample, it does nothing else than closing the menu.)

    <%@ Page Language="C#" %> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <script runat="server">  
     
    </script> 
     
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head runat="server">  
        <title></title>  
        <script type="text/javascript">  
            function rmMode_ItemClicked(sender, args)  
            {  
                sender.close();  
            }  
        </script> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
        <div> 
            <telerik:RadScriptManager  
                    id="RSM" 
                    runat="server" 
                    > 
            </telerik:RadScriptManager> 
            <telerik:RadMenu  
                    id="rmMode" 
                    runat="server" 
                    Flow="Horizontal" 
                    OnClientItemClicked="rmMode_ItemClicked" 
                    CollapseAnimation-Type="None" 
                    width="100px" 
                    > 
                    <Items> 
                        <telerik:RadMenuItem  
                                Text="Menu" 
                                > 
                            <Items> 
                                <telerik:RadMenuItem Text="Item1" Value="1" /> 
                                <telerik:RadMenuItem Text="Item2" Value="1" /> 
                            </Items> 
                        </telerik:RadMenuItem> 
                    </Items> 
            </telerik:RadMenu> 
        </div> 
        </form> 
    </body> 
    </html> 
     
  4. David
    David avatar
    3 posts
    Member since:
    Oct 2008

    Posted 30 Dec 2016 Link to this post

    This has stopped working in recent Telerik versions. I am on the latest -216.3.1027.45
  5. Plamen
    Admin
    Plamen avatar
    2959 posts

    Posted 01 Jan 2017 Link to this post

    Hi,

    Due to a change in the control we recommend using the close function in a setTimeout function when invoked from the click event:
    setTimeout(function() {
                   sender.close();
               }, 0);


    Regards,
    Plamen
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  6. Ioannis
    Ioannis avatar
    6 posts
    Member since:
    Dec 2010

    Posted 21 Apr in reply to Plamen Link to this post

    I had this same problem when I upgraded from the older controls where I could not collapse the menu after a menu item was clicked. Plamen's suggestion works great but perhaps someone may be interested in a more complete solution if they are using animation:

    function menuItemClicked(sender, args) {

        if (args.get_item().get_parent() != sender) {
            var oldAnimationType = args.get_item().get_parent()._slide._collapseAnimation.get_type();
            args.get_item().get_parent()._slide._collapseAnimation.set_type(Telerik.Web.UI.AnimationType.None);
            setTimeout(function () {
                sender.close(); args.get_item().get_parent()._slide._collapseAnimation.set_type(oldAnimationType);
            }, 0);
            sender.set_clicked(false);
        }
    }

    This will set the animation to none so it can close the menu quickly and then set the animation back to the animation type that was selected in the control declaration. Here is a sample of the menu in the aspx file:

                                <telerik:RadMenu ID="MainMenu" runat="server" EnableSelection="false"

                                    CollapseDelay="300" OnClientItemClicked="menuItemClicked" 
                                    OnClientItemClicking="MainMenuOnClientItemClicking" ClickToOpen="true">
                                    <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
                                    <Items>......</Items>
                                </telerik:RadMenu>


Back to Top