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
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.
Rank 1
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> |
Rank 1
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
Rank 1
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>