ItemTemplateを使用しているときにRadMenu ClickToOpen = "true"が機能しない

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> 

また、我々はそれを残して、あなただけの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