RadMenu Functionality Open/Close

[Daniel]

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.

[Boyan Dimitrov]

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

 

 

[Daniel]

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.