Close RadMenu on client click

5 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
    2789 posts

    Posted 01 Jan 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.
Back to Top