WebDataGrid 初級編その1:グリッドにデータを追加して、外観を変更してみる

この記事では WebDataGrid を使用する際の基本事項を紹介していきます。グリッドをデータにバインドしたり、列をカスタマイズしてみたり、グリッドのルックアンドフィールを変える、そんなことをしてみましょう。

The Basics - 基礎

まずは ScriptManager をページに追加します。グリッドの機能に使用されるスクリプトファイルのロードおよび処理を受け持つ ScriptManager コントロールは WebDataGrid 使用に必須です。WebDataGrid では Pay-to-Play というアーキテクチャを採用し、グリッド上で有効化されている機能に必要なスクリプトのみクライアント側にロードされるようになっています。

NetAdvantage ツールセットをインストールしてツールボックスにコントロールを追加したら、WebDataGrid をデザイン画面にドラッグアンドドロップで配置します。下記のようにデザイン画面に表示されるはずです。

designer

データをバインド

WebDataGrid にデータを提供する方法はいくつかあります。ここではコードビハインドから複数の Person クラスにバインドするシンプルな例を使用します。

custom-list-code 

注:上記のサンプルではデモ用に nBuilder というフレームワークを使用して Person クラスのインスタンスを作成しています。実際のアプリケーションではデータはビジネスロジックのレイヤー、サービス、あるいはデータアクセスのレイヤーから直接提供されるでしょう。

列のカスタマイズ

次にグリッドの列を定義します。 WebDataGrid では列の自動生成がサポートされていますが、この機能はプロトタイプやデモとして使用され、フォーマルなアプリケーションでは各列の明示的な定義が必要となると思われます。

列の設定はまずデザイナー上でグリッドをクリックして、コントロールの右上の小さな矢印をクリックすることから始まります。この矢印はスマートタグを起動します。スマートタグが表示されたら[列の編集]をクリックします。

 image

このリンクをクリックするとグリッドの列を管理するのに使用する列の編集ダイアログが起動します。起動後まずダイアログの下部分にあるフィールドを自動的に作成するのチェックを外します。この機能を無効にすることで明示的に定義された列のみがグリッドにレンダリングされるようになります。

列には BoundFields(バインドされたフィールド) と TemplateFields(テンプレート フィールド) の2つの種類があります。バインドされたフィールドでは必要な設定をいくつか入力するだけであとは自動的にデータソースからのデータがグリッドにレンダリングされます。下のスクリーンショットではバインドされたフィールドが動作するのに必要な最低限の項目がハイライトされています。

Grid Column Editor Dialog

テンプレート フィールドでは列にレンダリングされるコンテンツとレイアウトがよりフレキシブルになっています。バインドされたフィールドでは対照的に編集ダイアログで設定される範囲でしかレンダリングがされません。バインドされたフィールドをテンプレート フィールドに変換するにはエディター上でフィールドを選択し、選択したグリッド フィールドをテンプレート フィールドに変換するをクリックします。

いくつかグリッドの列を作成したら、ページを実行してみてください。下のスクリーンショットのようなグリッドが表示されるはずです。

grid-with-data

グリッドの外観を変えてみる

WebDataGrid のルックアンドフィールを様々に変更できるよう、NetAdvantage ツールセットには多くのスタイルセットが同梱されています。スタイルを適用するにはまず Visual Studio デザイナーからグリッドをクリックして、プロパティ ウィンドウを開きます。グリッドのプロパティ リストを下のほうまでスクロールしていくと、StyleSetName という項目があるはずです。この項目のドロップダウンリストをクリックすると、グリッドをスタイルするためのいくつかのオプションが表示されます。スタイル関連では以下のことが設定可能です:

  • デフォルトスタイルの選択
  • 既存のスタイルを選択
  • 新しいスタイルをインポート

StyleSetName Property

デフォルトあるいは既存のスタイルはタイトルを選択するだけで適用されます。既存のスタイルをインポートしたい場合にはインポートのオプションを選択すると、スタイルセットのインポートダイアログが表示されるのでアプリケーションにインポートするスタイルを指定します。

image

ここでは Office2007Silver セットを適用してみます。ページを実行するとグリッドは下記のスクリーンショットのように表示されるまずです。

styled-grid

参考資料

ソースコードをダウンロード(英語)

の全ての投稿を閲覧する

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