RadMenu ClickToOpen="true" does not work when using ItemTemplate

Question

I posted this on the Telerik forums, but it seems like they can take a few days to respond. Hopefully this is faster.

I need to use the following ItemTemplate for styling reasons, however ClickToOpen="true" does not work. What needs to be added in order for ClickToOpen to work properly? If I remove the ItemTemplate block it works as expected.

<telerik:RadMenu ID="RadMenu1" runat="server" ClickToOpen="true" Skin="Bootstrap">
    <Items>
        <telerik:RadMenuItem Text="Item 1">
            <ItemTemplate>
                <div class="caption">
                    <a href="#"><span><i></i>Item 1</span></a>
                </div>
            </ItemTemplate>
            <Items>
                <telerik:RadMenuItem Text="Sub Item 1"></telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Sub Item 2"></telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Sub Item 3">
                    <Items>
                        <telerik:RadMenuItem Text="Sub Sub Item 1"></telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="Sub Sub Item 2"></telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="Sub Sub Item 3"></telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Item 2">
            <ItemTemplate>
                <div class="caption">
                    <a href="#"><span><i></i>Item 2</span></a>
                </div>
            </ItemTemplate>
            <Items>
                <telerik:RadMenuItem Text="Sub Item 1"></telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Sub Item 2"></telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Sub Item 3">
                    <Items>
                        <telerik:RadMenuItem Text="Sub Sub Item 1"></telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="Sub Sub Item 2"></telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="Sub Sub Item 3"></telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenuItem>
    </Items>
</telerik:RadMenu>

woodykiddy · Accepted Answer · 2016-04-13T06:58:59.047

I think you probably want to look at implementing OnClientItemClicked client event.

<telerik:RadMenu ID="RadMenu1" runat="server" ClickToOpen="true" OnClientItemClicked="OnClientItemClicked">   
</telerik:RadMenu>

<script type="text/javascript">
    function OnClientItemClicked(sender, args) {
       args.get_item().open();
    }
</script>

Also, if the anchor tag is not required, then we can leave it out and only keep the span tag in your ItemTemplate. We can then style the span tag using a little bit of CSS to make it look like a link with ease.

But if the anchor tag is absolutely required for some reason, then you will need to add another JS function to handle the click on the hyperlink, and bubble the click event up to it's parent element. Hence, the OnClientItemClicked function will be called.

// id parameter is the hyperlink element id.
function openMenu(id) {
   // assume you have jquery included already on your page
   $("#" + id).parent().trigger("click");
}
// HTML example
<a class="rootMenuLink" id="rmItem2" onclick="openMenu('rmItem2')"><span><i></i>Item 2</span></a>

For more details, please check out the link of the API document below.

http://docs.telerik.com/devtools/aspnet-ajax/controls/menu/client-side-programming/overview

RadMenu ClickToOpen="true" does not work when using ItemTemplate

1 Answers1