NetAdvantage for ASP.NET 2009 Volume 1 日本語版リリース間近ということで・・・[その3 – WebDropDown と WebDataGrid の新機能]

シリーズ3つ目の今回はデータバインドなドロップダウンコントロール WebDropDown と WebDataGrid に追加された機能をご紹介します。

WebDropDown とは?

場所を取らずにあらかじめ用意された選択肢の中から項目を選ぶことのできるドロップダウンボックスは日々使用するアプリケーションでよく目にするものですが、WebDropDown はさらに機能強化されたドロップダウン コントロールです。

もちろん他のコントロール同様に AJAX 化されているので、大量のデータをオンデマンドでスクロール表示するできるようになっています。AJAX ロードオンデマンド機能をはじめとする機能は各プロパティ設定より有効にすることができます。
WebDropDown コントロール  


ページングとカスタム項目追加機能
スクロール以外にもデータ間をすばやくナビゲートするためにページャー機能や、ドロップダウンに表示される項目をユーザーが動的に追加することができるカスタム項目追加機能も追加されました。

この機能が有効になっていると、ユーザーがドロップダウンに存在しない項目を打ち込んだ後にその内容がドロップダウンに追加されます(下図参照)


 ドロップダウンでページング
 項目が表示されているドロップダウンに・・・  →  新しい項目を入力すると・・・  →  ドロップダウンに追加されます 

オートコンプリート機能

ユーザーが入力した値がドロップダウンにすでに存在する場合はオートコンプリート機能によって項目が自動的にハイライトされます。アプリケーションがユーザーに入力する選択肢を提案することで、スピーディーな項目選択が可能になります。

項目のテンプレート化

そしてこのコントロールが ASP.NET AJAX を使用して作成されたことによる大きな機能拡張は標準化されたデータバインディングを使った項目のテンプレート化です。

各項目のデータは Xml, SqlDataSource, Linq など様々なデータソースから取得されますが、画像や他の UI コントロールを含むことができれば連携してもっとリッチなドロップダウンコントロールが作成できますよね。

 "fro" と書きかけたところで "fro" で始まる項目が選択されます

そこで使えるのが WebDropDown の項目テンプレートです。

項目テンプレートを使用

WebDropDown の項目のレイアウトはテンプレート化されています。テンプレートの中ではおなじみの DataBinder を使用してバインドされたデータの項目を好きな所に表示させ、項目の表示を自由にカスタマイズすることができるようになっています。

下記のコードは左のような WebDropDown の項目表示をさせるためのテンプレートのサンプルですが、データバインディングされたフィールド (ThumbnailUrl, Name, LastUpdate) を指定するのに、おなじみの .NET データバインディング構文を使っています。
<itemtemplate>
   <table style="width: 100%; border-bottom: #ff0000 1px solid" cellspacing="0" cellpadding="0">
    <tr>
      <td style="padding-right: 10px; width: 71px" rowspan="3">
        <asp:image runat="server" height="94" width="71" imageurl="<%# DataBinder.Eval(Container.DataItem, "ThumbnailUrl") %>" />
      </td>
      <td style="padding-left: 10px; width: 150px; border-bottom: #e8e8e8 1px solid; text-align: left">
        <%# DataBinder.Eval(Container.DataItem, "Name")%>
      </td>
    </tr>
    <tr>
      <td style="padding-left: 10px; border-bottom: #e8e8e8 1px solid; text-align: left">
        更新日:<%# DateTime.Parse(DataBinder.Eval(Container.DataItem, "LastUpdate").ToString()).ToShortDateString() %>
      </td>
    </tr>
    <tr>
      <td style="padding-left: 10px; text-align: left">
        <%# DataBinder.Eval(Container.DataItem, "Summary").ToString().Substring(0, 30) + "..." %>
       </td>
      </tr>
   </table>
</itemtemplate>

来週に開催を控えた インフラジスティックス Developer Days 5 (満員御礼!)では WebDropDown これらの機能が実際に動作しているところをお見せするつもりです。Developer Days の見どころについては弊社エバンジェリスト山田のブログで紹介しておりますのでそちらもご覧ください。

WebDataGrid の新機能

WebDropdown 同様に ASP.AJAX をフル活用した新しい WebDataGrid には今回のリリースで新しく列移動の機能が追加されました。列をドラッグすると移動可能な場所に下のようなマークが付きます。

WebDataGrid_ColumnMoving_zoom

さらに、上記の WebDropDown 用に EditorProvider が用意されたことで WebDropDown を セルのエディタとして使用できるようになりました。

2009 Volume 1 で追加された他の機能につきましては今までのシリーズ記事をご覧ください。

また Windows Forms と WPF 製品がはいった NetAdvantage WinClient については機能紹介が弊社エバンジェリスト池原のブログに記載されておりますのでそちらも合わせてご覧ください。

次回はシリーズ最終回、WebDataMenu と ドラッグアンド ドロップ フレームワークのご紹介です。

の全ての投稿を閲覧する

Powered by Community Server (Commercial Edition), by Telligent Systems