Open and close radmenu on click

6 posts, 1 answers
  1. Daniel
    Daniel avatar
    159 posts
    Member since:
    Feb 2014

    Posted 10 Apr 2014 Link to this post

    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.
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 11 Apr 2014 in reply to Daniel Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Daniel
    Daniel avatar
    159 posts
    Member since:
    Feb 2014

    Posted 13 Apr 2014 in reply to Shinu Link to this post

    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
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 14 Apr 2014 in reply to Daniel Link to this post

    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.
  6. Daniel
    Daniel avatar
    159 posts
    Member since:
    Feb 2014

    Posted 22 Apr 2014 in reply to Shinu Link to this post

    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.
  7. Answer
    Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 24 Apr 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017