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

Close RadMenu on client click

5 Answers 249 Views
Menu
This is a migrated thread and some comments may be shown as answers.
lchesnais
Top achievements
Rank 1
lchesnais asked on 19 Sep 2008, 03:25 PM
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> 

5 Answers, 1 is accepted

Sort by
0
Accepted
Atanas Korchev
Telerik team
answered on 19 Sep 2008, 03:35 PM
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.
0
lchesnais
Top achievements
Rank 1
answered on 20 Sep 2008, 11:31 AM
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> 
 
0
David
Top achievements
Rank 1
answered on 30 Dec 2016, 05:06 PM
This has stopped working in recent Telerik versions. I am on the latest -216.3.1027.45
0
Plamen
Telerik team
answered on 02 Jan 2017, 05:51 AM
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.
0
Ioannis
Top achievements
Rank 1
answered on 22 Apr 2019, 01:19 AM

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>


Tags
Menu
Asked by
lchesnais
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
lchesnais
Top achievements
Rank 1
David
Top achievements
Rank 1
Plamen
Telerik team
Ioannis
Top achievements
Rank 1
Share this question
or