Using the menu in the code below, my expectation is that the child menu items would expand immediately, but would collapse 5 seconds after the mouse leaves the item. What's happening is the collapse happens immediately after the mouse leaves the item. What am I not understanding about CollapseDelay.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="Test" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <style type="text/css"> </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManagerProxy1" runat="server" /> <telerik:RadSkinManager ID="RadSkinManager1" runat="server" Skin="Default" ShowChooser="false" /> <telerik:RadFormDecorator ID="RadFormDecorator1" Runat="server" DecoratedControls="All" /> <telerik:RadMenu ID="RadMenu1" runat="server" EnableRootItemScroll="true" EnableRoundedCorners="true" EnableShadows="true" BorderWidth="0" Width="100%" CollapseDelay="5000" > <Items> <telerik:RadMenuItem Text="Guitars"> <Items> <telerik:RadMenuItem Text="Classical Guitars"> <Items> <telerik:RadMenuItem Text="1/2 Size Classical Guitars" /> <telerik:RadMenuItem Text="3/4 Size Classical Guitars" /> <telerik:RadMenuItem Text="7/8 Size Classical Guitars" /> <telerik:RadMenuItem Text="4/4 Size Classical Guitars" /> <telerik:RadMenuItem Text="Lefthanded Classical Guitars" /> <telerik:RadMenuItem Text="Concert Guitars" /> </Items> </telerik:RadMenuItem> <telerik:RadMenuItem Text="Steel String Guitars"> <Items> <telerik:RadMenuItem Text="3/4 Size and Travel Guitars" /> <telerik:RadMenuItem Text="Dreadnought Guitars" /> <telerik:RadMenuItem Text="Jumbo Guitars" /> <telerik:RadMenuItem Text="Folk Guitars" /> <telerik:RadMenuItem Text="12-String Westernguitars" /> <telerik:RadMenuItem Text="Lefthanded Acoustic Guitars" /> </Items> </telerik:RadMenuItem> <telerik:RadMenuItem Text="Acoustic Basses" /> <telerik:RadMenuItem Text="Electric Guitars"> <Items> <telerik:RadMenuItem Text="ST Models" /> <telerik:RadMenuItem Text="T-Models" /> <telerik:RadMenuItem Text="LP-Models" /> <telerik:RadMenuItem Text="SG Models" /> <telerik:RadMenuItem Text="7-String Guitars" /> <telerik:RadMenuItem Text="8-String Guitars" /> <telerik:RadMenuItem Text="Lefthanded Guitars" /> </Items> </telerik:RadMenuItem> <telerik:RadMenuItem Text="Electric Basses"> <Items> <telerik:RadMenuItem Text="4-String J-Basses" /> <telerik:RadMenuItem Text="5-String J-Basses" /> <telerik:RadMenuItem Text="4-String P-Basses" /> <telerik:RadMenuItem Text="Misc. 4-String Basses" /> <telerik:RadMenuItem Text="Misc. 5-String Basses" /> </Items> </telerik:RadMenuItem> <telerik:RadMenuItem Text="Amplifiers for Acoustic Guitars" /> <telerik:RadMenuItem Text="Amplifiers for Electric Guitars" /> <telerik:RadMenuItem Text="Bass Amplifiers" /> </Items> </telerik:RadMenuItem> </Items> </telerik:RadMenu> </form></body></html>
Thanks,
Dave
4 Answers, 1 is accepted
Hi Dave,
Thank you for the provided code!
I used it to test the behavior on my side and it works as expected, see http://somup.com/cYjuj6XnMd.
Could you please clarify if it behaves the same way on your side?
And Is the currently used version of Telerik Controls R2 2020 as stated in the ticket info or it is a previous one (if so which one)?
Still, if you experience the same behavior as the one shown in the video above and it is not complying with your expectations, there is a thing that might confuse you:
The CollapseDelay is set to define the time for collapsing the menu when you move the mouse out of the menu, without pointing to another MenuItem from the same RadMenu.
If you move the mouse from one item to another, then the ExpandDelay property will be taken into consideration and the CollapseDelay will not have any impact.
When one item is being expanded or focused, the previously expanded item is automatically collapsed.
Additionally, you can use the ExpandAnimation and CollapseAnimation to improve the user experience, see Animations
Kind regards,
Doncho
Progress Telerik
Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).
Rank 1
Iron
Veteran
Iron
Hi Doncho,
Thank you for providing clarity. I missed the interplay between ExpandDelay and CollapseDelay. I'm able to produce the desired by tweaking ExpandDelay. And yes I'm using R2 2020.
Another question: Expand and Collapse Delays are only available on the Menu itself, not on the items, correct? It might be useful for the children of one top level item to have a different expand/collapse behavior than the other siblings.
Thanks for your help!
Dave
Hello Dave,
The animation settings are set for the RadMenu and used for all items inside it. Having different settings for each item would create an inconsistent user experience and would irritate a lot of people.
If you decide to pursue this functionality, you can subscribe to the opening and closing events of the items and tweak the animation settings of the RadMenu itself or the expandDelay and collapseDelay:
- https://docs.telerik.com/devtools/aspnet-ajax/controls/menu/client-side-programming/events/onclientitemopening
- https://docs.telerik.com/devtools/aspnet-ajax/controls/menu/client-side-programming/events/onclientitemclosing
- sender.set_expandDelay(1000)
Regards,
Peter Milchev
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Iron
Veteran
Iron
Yes, of course, a consistent user experience is most desirable. We have a unique case, so I appreciate your guidance on item opening and closing events.
Thanks!
Dave