RadMenu ClickToOpen="true" не работает при использовании ItemTemplate

Question

Я разместил это на форумах Telerik, но похоже, что на ответ может потребоваться несколько дней. Надеюсь, это быстрее.

Мне нужно использовать следующий ItemTemplate для стилизации, однако ClickToOpen="true" не работает. Что нужно добавить, чтобы ClickToOpen работал правильно? Если я удаляю блок ItemTemplate, он работает как положено.

<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>

Answer 1

Я думаю, что вы, вероятно, хотите посмотреть на реализацию OnClientItemClicked клиентское событие.

<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>

Кроме того, если тег привязки не требуется, мы можем его оставить и оставить только тег span в вашем ItemTemplate. Затем мы можем стилизовать тег span, используя немного CSS, чтобы он легко выглядел как ссылка.

Но если тег привязки абсолютно необходим по какой-либо причине, вам нужно будет добавить еще одну функцию JS для обработки щелчка по гиперссылке и передать событие click до его родительского элемента. Следовательно OnClientItemClicked функция будет вызвана.

// 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>

Для более подробной информации, пожалуйста, проверьте ссылку на документ API ниже.

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