Menu for ASP.NET Web Forms
ChildItemsTemplate の作成
タスク別ヘルプ > テンプレートでの作業 > ChildItemsTemplate の作成

このチュートリアルでは、C1Menu コントロールの ChildItemsTemplate テンプレートの作成方法を学びます。このテンプレートは、C1Menu コントロールのすべての項目のプロトタイプとなり、Div 要素、入力(チェックボックス)コントロール、ラベルコントロールで構成されます。ラベルコントロールの Text プロパティは、個別メニュー項目の Text プロパティに連結されます。

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

  1. 1つの最上位メニュー項目を持つ C1Menu コントロールを作成します。子項目に One、Two、および Three という名前を付けます。
  2. C1Menu コントロールのスマートタグ()をクリックして、[C1Menu タスク]メニューから[テンプレートの編集]を選択します。[C1Menu タスク]メニューがテンプレート編集モードに切り替わります。
  3. 表示名]のドロップダウンリストボックスから ChildTopItemsTemplate を選択します。

  4. ツールボックスに移動し、ドラッグ&ドロップ操作で、Div 要素を ChildItems テンプレートに追加します。
  5. ツールボックスに移動し、ドラッグ&ドロップ操作で、入力(チェックボックス)コントロールとLabelコントロールを Div 要素に追加します。テンプレートは次のようになります。

  6. Label 要素を選択し、プロパティウィンドウに移動して、Text プロパティを「<% #DataBinder.Eval(Container.DataItem,"Text") %<」に設定します。これによって、ラベルの Text プロパティがデータ連結(後述の手順で指定)に連結されます。
  7. [テンプレート編集の終了]をクリックして、テンプレートを閉じます。
  8. 次の手順を実行して、データ連結を作成します。
    1. C1Menu コントロールのスマートタグ()をクリックして、[C1Menu タスク]メニューから[メニューのデータバインディングの編集…]を選択します。[バインディングコレクションエディタ]ダイアログボックスで、次の手順を実行します。
    2. 追加〉をクリックして、<Empty> データをプロジェクトに追加します。
    3. <Empty> データ連結の TextField プロパティを Text に設定します。
    4. OK〉をクリックして、[バインディングコレクションエディタ]を閉じます。
  9. プロジェクトを実行して、LinkItem1 を選択します。サブメニューの各メニュー項目が1つのチェックボックスと1つのラベルを含むことを確認します。また、ラベルテキストがこのチュートリアルの手順1で指定したテキストと同じであることを確認します。これは、このチュートリアルで指定したデータ連結であるためです。