0

剣道リストビューのアイテムを右クリックするたびに表示されるように構成された剣道コンテキスト メニューがあります。コンテキストメニュー内で、リストビューのどの項目がクリックされたかによって異なるため、いくつかのオプションに動的にロードする必要があるサブメニューオプションが必要です。必要なデータを返す ajax 呼び出しを構成しました。問題は、サブメニューが展開されたときに動的オプションが読み込まれるように、これらのオプションをサブメニューに割り当てる方法を理解できないことです。

cshtml ファイルに関連付けられた typescript ファイルに作成された剣道コンテキスト メニューがあります。ajax呼び出しが完了したときに、datasoureを作成した剣道コンテキストメニューにopenイベントを追加してから、剣道コンテキストメニューを作成してみました。欠点 - 古いメニューを置き換えるものであり、サブメニュー オプションをロードする必要がありません。私が試した他のことは、コンテキストメニューの選択イベントに同様のことを行うロジックを追加することでしたが、それはあまり効果がありませんでした

コンテキスト メニュー コード:

<ul id="ContextMenu" style="display:none">
  <li><i class="far fa-trash-alt fa-fw"></i> Delete</li>
  <li><i class="fas fa-minus fa-fw"></i>Stop</li>
  <li class="inc">
    <i class="fas fa-arrow-up fa-fw"></i>Increase
    <ul></ul>
  </li>
  <li class="dec">
    <i class="fas fa-arrow-down fa-fw"></i>Decrease
    <ul></ul>
  </li>
</ul>

Typescript ファイル、剣道コンテキスト メニューの作成:

$('#listView').on('mousedown', '.product', null, (e: JQueryEventObject) => {

    $("#ContextMenu").kendoContextMenu({
        target: "#listView",
        filter: ".item",
        select: (e: kendo.ui.ContextMenuSelectEvent) => {

            if (e.item.textContent.trim() == "Increase") {
                //Ajax call here 
                //If the ajax call succeeds 
                //I created the dynamic datasoure
                var ds = [{
                    text: "Increase",
                    items: [{
                        text: name
                    }]
                }];


                $("#lvPrescribedContextMenu").kendoContextMenu({
                    target: "#listView",
                    filter: ".item",
                    dataSource: ds
                });

コンテキスト メニューが開いたときに静的オプションが読み込まれ、サブメニュー オプションを含むオプションにカーソルを合わせるかクリックすると、動的オプションが表示されるはずです。

4

1 に答える 1