C1Menu は、他のほとんどの ComponentOne コントロールのコンテキストメニューとして使用できます。 このトピックでは、C1Menu コントロールを C1TreeView コントロールのコンテキストメニューとして表示する手順について説明します。

以下の手順を実行します。

1. C1Menu コントロールと C1TreeView コントロールをアプリケーションに追加します。
2. C1Menu のスマートタグをクリックして［C1Menu タスク］メニューを開き、［メニューの編集］を選択します。
3. C1Menu デザイナフォームで、〈子項目の追加〉ボタンをクリックし、C1MenuItem を C1Menu コントロールに追加します。
4. 今追加した C1MenuItem を選択し、プロパティウィンドウで Text プロパティを探します。 Text プロパティのテキストボックスに "ノードを追加する" と入力します。
5. 〈子項目の追加〉ボタンをクリックして、C1Menu に C1MenuItem を追加します。
6. 今追加した C1MenuItem を選択し、プロパティウィンドウで Text プロパティを探します。 Text プロパティのテキストボックスに "ノードを削除する" と入力します。
7. 〈OK〉をクリックして、C1Menu デザイナフォームを閉じ、ソースビューに切り替えます。
8. <cc1:C1Menu> タグに次のマークアップを追加します。

   ソースビュー	コードのコピー
   onclientselect="C1Menu_OnClientSelect" Orientation="Vertical"         Trigger="#C1TreeView1" TriggerEvent="Rtclick"

   完全な開始タグのマークアップは次のようになります。

   ソースビュー	コードのコピー
   <cc1:C1Menu ID="C1Menu1" runat="server"         onclientselect="C1Menu_OnClientSelect" Orientation="Vertical"         Trigger="#C1TreeView1" TriggerEvent="Rtclick">

9. <cc1:C1TreeView> を探し、このタグの間に以下のマークアップを追加します。

   ソースビュー

   コードのコピー

   <Nodes>             <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"                 Text="Node1">                 <Nodes>                     <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"                         Text="SubNode1">                     </cc1:C1TreeViewNode>                     <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"                         Text="SubNode2">                     </cc1:C1TreeViewNode>                 </Nodes>             </cc1:C1TreeViewNode>             <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"                 Text="Node2">                 <Nodes>                     <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"                         Text="SubNode1">                     </cc1:C1TreeViewNode>                     <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"                         Text="SubNode2">                     </cc1:C1TreeViewNode>                 </Nodes>             </cc1:C1TreeViewNode>         </Nodes>

10. <cc1:C1Menu> マークアップの上に以下のスクリプトを追加します。

    ソースビュー

    コードのコピー

    <script type="text/javascript">         $(document).ready(function () {             $(".wijmo-wijtree-node").mousedown(function (e) {                 if (e.button == 2)                     $(this).parent().c1treeviewnode("option", "selected", "true");             }); >         });           function C1Menu_OnClientSelect(sender, args) {             alert(args.item[0].innerText + " が選択されました。");         }     </script>

11. アプリケーションを実行します。 C1TreeView ノードのいずれかを右クリックすると、メニューが表示されます。