Open menu on click AND mouseover

[James]

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?

[Princy]

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.

[James]

Brilliant, thanks!

[James]

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?)

[Ulrich]

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>

[Kate]

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

[James]

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?

[Ulrich]

Hi Kate,

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

Ulrich

[Ivan Zhekov]

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

[Mark]

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.