DataGridにArrayListをバインドするには
● DataGridにArrayListをバインドするサンプル
図 DataGridにArrayListをバインドするサンプル
このサンプルは、DataGridにArrayListをバインドしています。DataGridのAutoGenerateColumnsプロパティにTrueを設定してカラムを自動生成させています。
このサンプルでは、以下のノウハウを習得することができます。
▲ ArrayListにListItemを追加する方法
▲ DataGridにArrayListをバインドする方法
▲ DataGridのCssClassプロパティの使い方
▲ HeaderStyle, ItemStyle, AlternatingItemStyleの使い方
▲ 外部ファイルに作成したCSSファイルをリンクする方法
このサンプルでは、DataGridにArrayListをバインドして表示しています。ArrayListにListItemを追加するには、ArrayListのAdd()メソッドを使用します。ListItemを生成するには、New ListItem(“Text”, “Value”)のように記述します。ListItemの引数には、Text/Valueプロパティを指定します。ArrayListをDataGridにバインドするには、DataGridのDataSourceプロパティに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
このサンプルでは、DataGridのAutoGenerateColumnsプロパティにTrueを設定してカラムを自動生成させています。AutoGenerateColumnsのデフォルト値は、Trueですから省略することもできます。サンプルでは、ArrayListにListItemが格納されていますので、ListItemのText/Valueプロパティが自動的に表示されます。
行26では、CssClassプロパティにCSSのクラス名dgrdShadowを設定しています。このクラスには、DataGridに影を付けるCSSが定義されています。HeaderStyle, ItemStyle, AlternatingItemStyleのCssClassにもCSSのクラス名を設定しています。HeaderStyleは、DataGridのヘッダスタイルを設定します。ItemStyleは、DataGridの奇数行アイテムのスタイルを設定します。AlternatingItemStyleは、DataGridの偶数行アイテムのスタイルを設定します。
24: <asp:DataGrid id="dgrdVsNet"
runat="server"
25:
AutoGenerateColumns="True"
26: CssClass="dgrdShadow"
27: EnableVie
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ページの背景色を変更するとき、外部ファイルのCSSをbody{backgroud-color: green}のように書き換えるだけですべてのASPXページの背景色が緑色に変わります。 |