パワフルRIAを実現する「NetAdvantage ASP.NET AJAX」コントロールスイートを使おう

WebDataMenuとWebDropDownの利用

WebDataMenuの項目テンプレート

　前項のデータバインディングの際にお気づきかもしれませんが、データバインド可能なプロパティにはImageUrlやNavigateUrlがあります。データバインディングのみでもアイコンの表示をさせることは可能ですが、メニュー内にはユーザーに便利な機能を提供する際に必要な、もっと複雑な項目として表示させることも可能です。

　スマートタグ上には［テンプレート コレクションの編集］という項目がありますが、ここをクリックすることによりメニュー上で使用されるテンプレートを追加することができます。

図5　テンプレート コレクションの編集ウィンドウ

　ここで設定されるTemplateIDプロパティの値が実際にメニュー項目のTemplateIDプロパティに設定する値になります。

　テンプレートコレクションにテンプレートを追加し、スマートタグより［テンプレートの編集］をクリックします。スマートタグ上にテンプレートのドロップダウンが表示されます。先ほど追加したテンプレートの中身を作成してみましょう。

図6　WebDataMenuの項目テンプレート

　任意のコントロールをテンプレート内に配置します。ここではシンプルなボタンを配置しました。

図7　テンプレート内に配置されたボタン

　さらに、テンプレート内の各コントロールのデータバインディングの設定を行います。

図8　テンプレート内コントロールのデータバインディング設定タスク

図9　データバインディング編集ウィンドウ

　カスタムバインディングにはASP.NETのDataBinderを使用しますが、実際のデータのContainerオブジェクトはInfragistics.Web.UI.TemplateContainerオブジェクトにキャストをしたうえで使用します。カスタムバインディングで使用する式は次のようになります。

DataBinder.Eval(((Infragistics.Web.UI.TemplateContainer)Container).DataItem, "MenuName")

　これでテンプレートの定義および中身の作成が完了しました。後はこのテンプレートを適用する項目のTemplateIDプロパティを設定することでテンプレートが有効化されます。

　ページを実行すると先ほど作成したテキスト項目だけのメニューが、フォーマットを施した項目表示に変わります。

図10　データバインディング設定をしたWebDataMenu

　テンプレートは一つ一つの項目に設定することも可能ですし、項目のグループごとに設定することでサブメニューのルックアンドフィールや機能を統一させることも可能です。

WebDataMenuのその他の機能

　WebDataMenuには今回紹介した機能だけでなく、縦・横表示や場所による項目展開表示調整、さらにコンテキストメニューとしての使用などの機能が含まれています。

図11　コンテキストメニューとしてのWebDataMenu使用例