Open menu on click AND mouseover

10 posts, 0 answers
  1. James
    James avatar
    70 posts
    Member since:
    Jun 2009

    Posted 30 Jul 2010 Link to this post

    Hi,

    i know there is a setting ClickToOpen setting to allow you to choose BETWEEN the menu opening on a click, or when the mouse goes over it.

    I however would like the menu to open  for BOTH a click and mouse over. th reason being that we have an intranet application that we are going to be sharing out onto the internet. Our main users will be using full IE and like the menu opening when the mouse overs. Our remote users will be using iphones and cannot use the mouse over, so the idea solution is to have both modes enabled.

    Is this possible?

  2.
  3. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 30 Jul 2010 Link to this post

    Hello James,

    Check out the following sample code which opens the RadMenu on menu click and on MouseOver.

    ASPX:
    <telerik:RadMenu ID="RadMenu1" OnClientMouseOut="OnClientMouseOut" OnClientMouseOver="MouseOver"
        runat="server" ClickToOpen="True">
       <Items>
         <telerik:RadMenuItem runat="server" Text="Root RadMenuItem1" Value="value1" >
             <Items>
                <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1" Value="value11" >
                </telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2" Value="value22">
                </telerik:RadMenuItem>
              </Items>
           </telerik:RadMenuItem>
        </Items>
    </telerik:RadMenu>

    Java Script:
    <script type="text/javascript">
        function MouseOver(sender, args) {
            args.get_item().open();
        }
        function OnClientMouseOut(sender, args) {
            args.get_item().close();
        }
    </script>

    Thanks,
    Princy.
  5. James
    James avatar
    70 posts
    Member since:
    Jun 2009

    Posted 30 Jul 2010 Link to this post

    Brilliant, thanks!
  7. James
    James avatar
    70 posts
    Member since:
    Jun 2009

    Posted 30 Jul 2010 Link to this post

    sorry - just noticed, this works mostly, but, if you mouse over a menu item it closes the menu (i guess the mouse out is firing?)

  8.
  9. Ulrich
    Ulrich avatar
    19 posts
    Member since:
    Aug 2010

    Posted 20 May 2011 Link to this post

    I have the same problem here. I've been trying to get my menu open on both a click and mouse over. I thought I finally had the solution, but then I noticed the same problem as James, when I mouse over a (parent) menu item, the (child) item menu opens. However, when I now leave the parent item and move the mouse over to a child item, the menu closes again and I can't open any item...

    See also my attached code below.

    Is there any solution to this???

    Any help would be appreciated!

    <    telerik:RadMenu ID="RadMenu1" runat="server" Style="z-index: 2900" DataFieldID="ID" 
        DataFieldParentID="ParentID" DataTextField="Bezeichnung" Height="16px" Width="890px" 
        Font-Bold="True" Font-Size="Small" Font-Names="Arial" EnableRoundedCorners="True" 
        EnableShadows    ="True" CollapseDelay="200" DataValueField="Link" ClickToOpen="True" 
        OnClientItemClicking    ="OnClientItemClicking" OnClientMouseOver="MouseOver" 
        OnClientMouseOut="OnClientMouseOut"> 
    <CollapseAnimation Type="InCubic" /> 
    <ExpandAnimation Type="OutCubic" />
    </telerik:RadMenu>
      
      
    <script type="text/javascript">
            function OnClientItemClicking(sender, eventArgs) {
                var item = eventArgs.get_item();
      
                if (item.get_level() == 0) {
                    item.open();
                    eventArgs.set_cancel(true);
                }
                else {
                    eventArgs.set_cancel(false);
                }
            }
      
            function MouseOver(sender, args) {
                args.get_item().open();
            }
            function OnClientMouseOut(sender, args) {
                args.get_item().close();
            }
        </script>
  11. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 25 May 2011 Link to this post

    Hi Ulrich,

    I tested your code and I am not sure why you are using the MouseOver and the OnClientMouseOut client-side functions. Simply by using the OnClientItemClicking function and the ClickToOpen="false" property you can achieve the desired functionality of the RadMenu. Here is the markup of the RadMenu:

    <telerik:RadMenu ID="RadMenu1" runat="server" Style="z-index: 2900" DataFieldID="ID"
        DataFieldParentID="ParentID" DataTextField="Bezeichnung" Height="16px" Width="890px"
        Font-Bold="True" Font-Size="Small" Font-Names="Arial" EnableRoundedCorners="True"
        EnableShadows="True" CollapseDelay="200" DataValueField="Link" OnClientItemClicking="OnClientItemClicking">
        <CollapseAnimation Type="InCubic" />
        <ExpandAnimation Type="OutCubic" />
       ...
    </telerik:RadMenu>

    Regards,
    Kate
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  13. James
    James avatar
    70 posts
    Member since:
    Jun 2009

    Posted 25 May 2011 Link to this post

    specifically i wanted to have a rad menu that was usable on both trandtional desktop PCs where the user would just mouse over the AND ALSO on a touche screen phone, such as an iPhone where there is no mouse over events.

    ont he iPhone, etc, you can detect the mouse over if they tap, but then you can't use the mousout to close the menu again - hence, wanting to open the menu if they tapped or mouse overed.

    have you got a working solution to this?
  14.
  15. Ulrich
    Ulrich avatar
    19 posts
    Member since:
    Aug 2010

    Posted 27 May 2011 Link to this post

    Hi Kate,

    thanks so much for your solution, that was exactly what I was looking for!

    Ulrich
  17. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    651 posts

    Posted 27 May 2011 Link to this post

    Hi James,

    We tested on iPad and Galaxy S based devises, as well as a Windows 7 phone, and the snippet below worked. You may experience different smoothness of the animation, based on the device's specs, but otherwise the snippet works fine.

    function OnClientItemClicking(sender, eventArgs) {
        var item = eventArgs.get_item();
     
        if (item.get_level() == 0) {
            item.open();
            eventArgs.set_cancel(true);
        }
        else {
            eventArgs.set_cancel(false);
        }
    }

    <telerik:RadMenu ID="RadMenu1" runat="server" ... OnClientItemClicking="OnClientItemClicking" ...>
    ...
    </telerik:RadMenu>

    The mouse events are not required, nor is the ClickToOpen attribute.

    Greetings,
    Ivan Zhekov
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  19. Mark
    Mark avatar
    2 posts
    Member since:
    May 2010

    Posted 16 Feb 2012 Link to this post

    This thread has saved me some sleepless nights, that's for sure.   Thanks Ivan and Kate; Telerik support is awesome as usual.  Thanks to other posters for asking the question.
  20.
Back to Top