Open and close radmenu on click

[Daniel]

Hello 

I'm currently working on a project that includes RadMenu. 
The functionality that I want is this: 

Only when I click on the item it will open and not by mouse hover. (Each tab separately). 

My ASPX code: 

01.<telerik:RadMenu ID="RadMenu1" Runat="server" ClickToOpen="True" OnClientMouseOver="OnClientMouseOverHandler" style="top: 0px; left: 0px; width: 414px; height: 40px">
02.                       <Items>
03.                           <telerik:RadMenuItem runat="server" Text="Root RadMenuItem1">
04.                               <ContentTemplate>
05.                                   <div id="NewsWrapper" class="Wrapper">
06.                                       sdfsdfsdfs
07.
08.                                         <a class="moreLink" href="#">View all »</a>
09.                                   </div>
10.                               </ContentTemplate>
11.                           </telerik:RadMenuItem>
12.                           <telerik:RadMenuItem runat="server" Text="Root RadMenuItem2">
13.                              <ContentTemplate>
14.                                   <div id="Div1" class="Wrapper">
15.                                       sdfsdfsdfs
16.
17.                                         <a class="moreLink" href="#">View all »</a>
18.                                   </div>
19.                               </ContentTemplate>
20.                           </telerik:RadMenuItem>
21.                           <telerik:RadMenuItem runat="server" Text="Root RadMenuItem3">
22.                              <ContentTemplate>
23.                                   <div id="Div2" class="Wrapper">
24.                                       sdfsdfsdfs
25.
26.                                         <a class="moreLink" href="#">View all »</a>
27.                                   </div>
28.                               </ContentTemplate>
29.                           </telerik:RadMenuItem>
30.                       </Items>
31.                   </telerik:RadMenu>

JS code:

01.<script type="text/javascript">
02.       function OnClientMouseOverHandler(sender, eventArgs) {
03.           if (eventArgs.get_item().get_parent() == sender) {
04.               sender.set_clicked(false);
05.           }
06.       }
07.
08.
09.   </script>

My problem is that when one item is already opened, and I move the mouse away and back , and then click on it, it does not recognize that it is already opened, and opens again. 

How do I fix this? 

Pseudo code  like this: 
if radmenuitem.isOpen == true 
       radmenuitem.close


Thanks,

Daniel.

[Shinu]

Hi Daniel,

Please try to attach the OnClientItemClicking event of RadMenu to achieve your scenario.

JavaScript:

function OnClientItemClicking(sender, args) {
    if (args.get_item().get_isOpen() == true) {
        args.get_item().close();
    }
}

Thanks,
Shinu.

[Daniel]

Hello Shinu, 

Thanks for your response 

But it does not work - it still does the problem. 


I put an Alert into your function, and I checked and it detects an open menu, but despite everything, if I move the mouse from an open menu and then returns it and click again, its open it again (although it is already open) 

Hope you have more ideas 


Thanks, 
Daniel

[Shinu]

Hi Daniel,

Please do the following modifications in your code which works fine at my end.

ASPX:

<telerik:RadMenu ID="RadMenu1" runat="server" OnClientItemClicking="OnClientItemClicking" ClickToOpen="true" Style="top: 0px; left: 0px; width: 414px; height: 40px">
           ...
</telerik:RadMenu>

JavaScript:

function OnClientItemClicking(sender, args) {
    if (args.get_item().get_isOpen() == true) {
        args.get_item().close();
    }
}

Thanks,
Shinu.

[Daniel]

Hi shinu

I sorry but it don't work:

if I remove the OnClientMouseOver Function its do that:
After I open one of the tabs,  its open the rest of the tabs when I hover.

and I don't want this

what I need is that:
only when I press on tab-menu it will open.

[Boyan Dimitrov]

Hello,

Please use the following workaround in order to close an already opened item instead of reopen it after mouse was moved away from the item element.
//markup code

<telerik:RadMenu ID="RadMenu1" runat="server" ClickToOpen="True" OnClientItemClicking="OnClientItemClicking" Style="top: 0px; left: 0px; width: 414px; height: 40px">
            <Items>
                <telerik:RadMenuItem runat="server" Text="Root RadMenuItem1">
                    <ContentTemplate>
                        <div id="NewsWrapper" class="Wrapper">
                            sdfsdfsdfs

                                         <a class="moreLink" href="#">View all »</a>
                        </div>
                    </ContentTemplate>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server" Text="Root RadMenuItem2">
                    <ContentTemplate>
                        <div id="Div1" class="Wrapper">
                            sdfsdfsdfs

                                         <a class="moreLink" href="#">View all »</a>
                        </div>
                    </ContentTemplate>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem runat="server" Text="Root RadMenuItem3">
                    <ContentTemplate>
                        <div id="Div2" class="Wrapper">
                            sdfsdfsdfs

                                         <a class="moreLink" href="#">View all »</a>
                        </div>
                    </ContentTemplate>
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenu>

//JavaScript

function OnClientItemClicking(sender, args) {
                if (args.get_item().get_isOpen() == true) {
                    args.set_cancel(true);
                    args.get_item().close();
                }
            }

You simply need to cancel the click event execution before closing the item.

Regards,
Boyan Dimitrov
Telerik