DataGridArrayListをバインドするには

 

  DataGridArrayListをバインドするサンプル

 

DataGridArrayListをバインドするサンプル

 

このサンプルは、DataGridArrayListをバインドしています。DataGridAutoGenerateColumnsプロパティにTrueを設定してカラムを自動生成させています。

 

このサンプルでは、以下のノウハウを習得することができます。

 

  ArrayListListItemを追加する方法

  DataGridArrayListをバインドする方法

  DataGridCssClassプロパティの使い方

  HeaderStyle, ItemStyle, AlternatingItemStyleの使い方

  外部ファイルに作成したCSSファイルをリンクする方法

 

このサンプルでは、DataGridArrayListをバインドして表示しています。ArrayListListItemを追加するには、ArrayListAdd()メソッドを使用します。ListItemを生成するには、New ListItem(“Text”, “Value”)のように記述します。ListItemの引数には、Text/Valueプロパティを指定します。ArrayListDataGridにバインドするには、DataGridDataSourceプロパティにArrayListを設定してDataBind()メソッドを実行します。

 

  5:   Dim arrVsNet As New ArrayList()
  6:   If Not IsPostBack Then
  7:     With arrVsNet
  8:       .Add(New ListItem("Visual Basic .NET","VB.NET"))
  9:       .Add(New ListItem("Visual C++ .NET","C++.NET"))
 10:       .Add(New ListItem("Visual C# .NET","C#.NET"))
 11:       .Add(New ListItem("Visial J# .NET","J#.NET"))
 12:     End With
 13:     dgrdVsNet.DataSource = arrVsNet
 14:     dgrdVsNet.DataBind()
 15:   End If

 

このサンプルでは、DataGridAutoGenerateColumnsプロパティにTrueを設定してカラムを自動生成させています。AutoGenerateColumnsのデフォルト値は、Trueですから省略することもできます。サンプルでは、ArrayListListItemが格納されていますので、ListItemText/Valueプロパティが自動的に表示されます。

 

26では、CssClassプロパティにCSSのクラス名dgrdShadowを設定しています。このクラスには、DataGridに影を付けるCSSが定義されています。HeaderStyle, ItemStyle, AlternatingItemStyleCssClassにもCSSのクラス名を設定しています。HeaderStyleは、DataGridのヘッダスタイルを設定します。ItemStyleは、DataGridの奇数行アイテムのスタイルを設定します。AlternatingItemStyleは、DataGridの偶数行アイテムのスタイルを設定します。

 

24: <asp:DataGrid id="dgrdVsNet" runat="server"
 25:   AutoGenerateColumns="True"
 26:   CssClass="dgrdShadow"
 27:   EnableViewState="False">
 28:   <HeaderStyle CssClass="dgrdHeaderStyle" />
 29:   <ItemStyle CssClass="dgrdItemStyle" />
 30:   <AlternatingItemStyle CssClass="dgrdAlternatingItemStyle" />
 31: </asp:DataGrid>

 

CSSのクラスは、CSSの外部ファイルstyle1.cssファイルに定義されています。この外部ファイルは、<link>タグで取り込んでいます。

 


 21: <link rel="stylesheet" type="text/css" href="../../css/style1.css">

 

CSSのクラスは、外部ファイルstyle1.cssに以下のように定義されています。

 

.txtShadow

{

filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color='gray', Positive='true')

}

 

.dgrdHeaderStyle

{

background-color: black;

color: white;

text-align: center;

font-size: small;

font-weight: bold;

}

 

.dgrdItemStyle

{

background-color: darkgray;

color: black;

font-size: x-small;

}

 

.dgrdAlternatingItemStyle

{

background-color: #d3d3d3;  /* lightgray */

color: black;

font-size: x-small;

}

 

 

Tip

CSS(Cascading Style Sheets)を外部ファイルに定義する理由

 

CSSを外部ファイルに定義して<link>タグで取り込むことにより、すべてのASPXページのスタイルを一括して変更することができます。たとえば、ASPXページの背景色を変更するとき、外部ファイルのCSSbody{backgroud-color: green}のように書き換えるだけですべてのASPXページの背景色が緑色に変わります。

 

 

ASP.NET DataGridのホームへ戻る