RadMenu Functionality Open/Close

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

    Posted 01 Oct 2014 Link to this post

    Hello,

    I am working on a project with a RadMenu.
    The RadMenuItem opens on mouse-click. It closes on any of the following: mouse-click on itself,
    mouse-click on the screen, mouse-click on a different RadMenuItem inside the same RadMenu.

    However, I have found a problem in this functionality:
    First mouse-click - RadMenuItem opens.
    Second mouse-click - RadMenuItem closes.
    Third mouse-click - does nothing (should open again).
    Fourth mouse-click - RadMenuItem opens again...

    The problem is: why is it not responding to the third mouse-click?!
    [Attached Video]

    ASP.NET Code: 
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
                <script type="text/javascript">
      
                    function ExternalitemOpened(s, e) {
                        if ($telerik.isIE8) {
                            // Fix an IE 8 bug that causes the list bullets to disappear (standards mode only)
                            $telerik.$("li", e.get_item().get_element())
                                .each(function () { this.style.cssText = this.style.cssText; });
                        }
                    }
      
      
      
      
                    function External_MouseOver(sender, args) {
                        if (args.get_item().get_parent() == sender) {
                            sender.set_clicked(false);
                        }
                    }
      
      
                    function ExternalOnClientItemClicking(sender, args) {
                        if (args.get_item().get_isOpen() == true) {
                            args.set_cancel(true);
                            args.get_item().close();
                        }
                    }
      
      
      
      
                </script>
            </telerik:RadCodeBlock>
     
    <telerik:RadMenu ID="RadMenu_SpecialReport" runat="server" ClickToOpen="True" EnableShadows="True" OnClientItemOpened="ExternalitemOpened" OnClientItemClicking="ExternalOnClientItemClicking" OnClientMouseOut="External_MouseOver" Style="top: 0px; left: -2px; z-index: 100; height: 35px;" Skin="ExternalGridButtons" EnableEmbeddedSkins="false">
                    <Items>
                        <telerik:RadMenuItem PostBack="true" Text="Special Reports" Value="Special_Reports" CssClass="btn  btn-primary btn-menu-grid-size">
                            <ContentTemplate>
                                <div id="Special_panel" class="Special_panel" style="width:300px; height:500px; background-color:white;">
      
                                    <telerik:RadAjaxPanel ID="RadAjaxPanel_SpecialReport" runat="server"  Width="80%"></telerik:RadAjaxPanel>
                                    <telerik:RadButton ID="btn_ShowSpecialReport" runat="server" Text="Show Special Report" Skin="Web20" CssClass="btn_Sort" OnClick="btn_ShowSpecialReport_Click"></telerik:RadButton>
                                </div>
                            </ContentTemplate>
                        </telerik:RadMenuItem>
                         <telerik:RadMenuItem PostBack="true" Text="zzzz" Value="zzzzz" CssClass="btn  btn-primary btn-menu-grid-size">
                            <ContentTemplate>
                                <div id="Div1" class="Special_panel" style="width:300px; height:500px; background-color:white;">
      
                                    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server"  Width="80%"></telerik:RadAjaxPanel>
                                    <telerik:RadButton ID="RadButton2" runat="server" Text="Show Special Report" Skin="Web20" CssClass="btn_Sort" OnClick="btn_ShowSpecialReport_Click"></telerik:RadButton>
                                </div>
                            </ContentTemplate>
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem IsSeparator="true"></telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenu>



    How to solve this?

    Thank you,
    Daniel.
  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 06 Oct 2014 Link to this post

    Hello,

    It seems that this behavior is caused by the custom functionality in the OnClientItemClicking client-side event handler. The RadMenu ClickToOpen="True" will close the opened item if you click on different item or out of the RadMenu.

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Daniel
    Daniel avatar
    159 posts
    Member since:
    Feb 2014

    Posted 06 Oct 2014 in reply to Boyan Dimitrov Link to this post

    Hi Boyan Dimitrov,

    Thank you for your response.

    I success to resolve this issue.

    Changing the JavaScript code will resolute the desire solution:
      function ExternalOnClientItemClicking(sender, args) {
                       if (args.get_item().get_isOpen() == true) {
                           args.set_cancel(true);
                           args.get_item().close();
                       }
                       else {
                           args.set_cancel(true);
                           args.get_item().open();
                       }
    }

            
     
    Regards,
    Daniel.
Back to Top