WebDataGrid の基本機能 - データの表示および外観のカスタマイズ

0 ユーザーが評価
この投稿には確認済みの回答があります。 0 返信 | 1 サポーター

トップ 10 投稿者 
男性
投稿 12
IG Employee
セドリック 投稿済み: 2010/12/14 8:38

元記事 (英語):  Craig Shoemaker - http://community.infragistics.com/aspnet/articles/webdatagrid-101-fill-the-grid-with-data-and-change-the-look-and-feel.aspx

この記事は WebDataGrid の基本機能をご紹介します。以下の例では、グリッドをデータにバインドし、列をカスタマイズしてグリッドのルックアンド フィールを簡単に変更する方法をご覧いただきます。

ベーシック

ページに ScriptManager または WebScript Manager を追加します。ScriptManager コントロールは、グリッドに必要なスクリプト ファイルの読み込みと処理に必要になります (WebDataGrid は「pay-to-play」構造をサポートします)。「pay-to-play」は、高度な機能に必要なスクリプトファイルが提供されている (グリッドで各動作が有効な場合のみ) モデルを参照します。

NetAdvantage 製品をインストールしてツールボックスにコントロールを追加した後、WebDataGrid を Visual Studio のデザイン サーフェイスへドラッグすると、ページは次のようになります。

 

データ バインディング

WebDataGrid にはデータを提供するいくつかの方法があります。この例では、Person クラスの複数のインスタンスをグリッドにコードビハインドでバインドします。

 

注: 上の例では、Person クラスのインスタンスを速くて簡単に生成するために nBuilder を使用します。通常は、データはビジネス ロジック レイヤーまたはデータ アクセスレイヤーなどから取得します。

列のカスタマイズ

次はグリッドで列を定義します。WebDataGrid は列の自動生成をサポートしますが、この機能はプロトタイプやデモでよく使用されるため、信頼性のあるアプリケーションを作成するためには列を明示的に定義する必要があります。

グリッドで列を設定するためには、デザイナーでグリッドをクリックしてコントロール右上の矢印をクリックします。スマート タグが表示されます。スマートタグが表示されたら 「列の編集」リンクをクリックします。

 

このリンクをクリックすることによって、「グリッド列の編集」エディターを実行し、グリッド列の管理が可能になります。まず、ダイアログの下の「フィールドの自動生成」チェックボックスのチェックを解除します。この機能を解除すると、グリッドで明示的に定義されている列のみ描画します。

列は BoundField と TemplateFields の 2 種類があります。BoundField はフィールドの定義が簡単にできます。フィールドに必要な情報およびデータソースからのデータを提供するだけで、グリッドに描画することができます。以下では、バインドフィールドの最も簡単な実装方法を紹介します。

 

BoundField は ダイアログに定義されているデータのみ描画しますが、TemplateField では、列のコンテンツやデータをより柔軟に描画できます。 BoundField を簡単に TemplateField へ変換するには、エディターでフィールドを選択して「選択したグリッド フィールドをテンプレート フィールドに変換する」リンクをクリックします。

グリッドにいくつかの列を作成した後にページを実行すると、以下のようなグリッドが表示されます。

 

外観のカスタマイズ

NetAdvantage 製品には、WebDataGrid のルック アンド フィールを変更するさまざまなスタイルセットが含まれます。スタイルを適用するには、Visual Studio デザイナーでグリッドをクリックしてプロパティ ウインドウを参照します。グリッド プロパティを下へスクロールすると StyleSetName プロパティがあります。ドロップダウンリストをクリックすると、グリッドのスタイル オプションが表示されます。利用可能なオプション:

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

 

デフォルトまたは既存のスタイルを適用するには、ドロップダウン リストからスタイル名を選択します。他のスタイルをインポートするには、リストからインポートオプションを選択します。インポートを選択すると、アプリケーションにスタイルをインポートすることができるスタイルセットのインポート ダイアログを表示します。

 

この例では、Office2010Blue スタイルが選択され、グリッドに適用されます。ページを実行すると、グリッドは以下のスクリーンショットのようになります。

 

リソース

 

ページ 1 / 1 (1 項目) | RSS
Infragistics Japan
インフラジスティックス ジャパン