DataGridのカラムにCheckBox/DropDownList/Imageを表示するには
● DataGridのカラムにCheckBoxを表示するサンプル
図 DataGridのカラムにCheckBoxを表示するサンプル
データベースのYes/No型のフィールドをBoundColumnで表示するとYes/No(True/False)が表示されます。このサンプルでは、生産中止のフィールドをTrue/False形式で表示する代わりにCheckBoxで表示して見易くしています。
このサンプルでは、以下のノウハウを習得することができます。
▲ DataGridにCheckBoxを表示する方法
サンプルの行41-63では、DataGridを定義しています。行48-62の<Columns>…</Columns>では、BoundColumn、TemplateColumnで商品テーブルの商品ID、商品名、生産中止フラグを表示しています。行49-51のBoundColumnでは、商品IDをバインドしています。行52-53のBoundColumnでは、商品名をバインドしています。行54-61のTemplateColumnでは、生産中止フラグを表示しています。行56-60のItemTemplateでは、CheckBoxを定義しています。行59では、CheckBoxのCheckedプロパティに生産中止フラグをバインドしています。生産中止フラグには、True/Falseが格納されています。
41: <asp:DataGrid id="dgrdProducts"
runat="server"
::::
>
::::
48: <Columns>
49: <asp:BoundColumn
50:
DataField="ProductID" HeaderText="ID"
51:
ItemStyle-HorizontalAlign="Right" />
52: <asp:BoundColumn
53:
DataField="ProductName" HeaderText="商品名" />
54: <asp:TemplateColumn
HeaderText="生産中止"
55:
ItemStyle-HorizontalAlign="Center">
56:
<ItemTemplate>
57:
<asp:CheckBox runat="server"
58:
Enabled="True"
59:
Checked='<%#
Container.DataItem("Discontinued") %>' />
60:
</ItemTemplate>
61:
</asp:TemplateColumn>
62: </Columns>
63:
</asp:DataGrid>
Tip
|
DataGridに表示するCheckBoxを編集不可にするには このサンプルでは、DataGridに表示されているCheckBoxをクリックするとチェックマークが付きます。CheckBoxを編集不可にするには、EnabledプロパティにFalseを設定します。CheckBoxは、TextBoxのようにReadOnlyプロパティがサポートされていませんので、代わりにEnabledプロパティを使用します。CheckBoxを使用する代わりにCheckBoxのイメージを表示する方法もあります。 54: <asp:TemplateColumn HeaderText="生産中止" |
● DataGridのカラムにDropDownListを表示するサンプル
図 DataGridのカラムにDropDownListを表示するサンプル
このサンプルでは、仕入先の取扱商品をDropDownListで表示しています。DataGridのDropDownListをクリックすると、仕入先の取扱商品が一覧に表示されます。
このサンプルでは、以下のノウハウを習得することができます。
▲ DataGridにDropDownListを表示する方法
▲ DropDownListのDataSourceプロパティに関数をバインドする方法
▲ DataSetに仕入先テーブルと商品テーブルを格納する方法
▲ 仕入先テーブルと商品テーブルにリレーションを設定する方法
▲ DataRowのGetChildRo
サンプルの行58-80では、DataGridを定義しています。行64-79の<Columns>…</Columns>では、BoundColumn、TemplateColumnで仕入先テーブルの仕入先ID、仕入先名とDropDownListを表示しています。行65-68のBoundColumnでは、仕入先IDをバインドしています。行69-70のBoundColumnでは、仕入先名をバインドしています。行71-78のTemplateColumnでは、取扱商品を表示しています。行72-77のItemTemplateでは、DropDownListを定義しています。行76では、DropDownListのDataSourceプロパティにGetProducts()関数をバインドしています。関数の引数には、DataRowViewを指定しています。GetProducts()関数は、仕入先の取扱商品をArrayListに格納して返します。つまり、DataSourceにArrayListをバインドします。
58: <asp:DataGrid id="dgrdSuppliers"
runat="server"
59:
AutoGenerateColumns="False"
:::: >
64:
<Columns>
65: <asp:BoundColumn
66:
DataField="SupplierID" HeaderText="ID">
67:
<ItemStyle HorizontalAlign="Right" />
68:
</asp:BoundColumn>
69: <asp:BoundColumn
70:
DataField="CompanyName" HeaderText="仕入先名" />
71: <asp:TemplateColumn
HeaderText="取扱商品">
72:
<ItemTemplate>
73:
<asp:DropDownList runat="server"
74:
BackColor="FloralWhite"
75:
Width="150px"
76:
DataSource='<%#
GetProducts(Container.DataItem) %>' />
77:
</ItemTemplate>
78: </asp:TemplateColumn>
79: </Columns>
80:
</asp:DataGrid>
Page_Load()イベントでは、ページが最初にロードされたときSub BindDataGrid()を呼び出して、仕入先テーブルとDropDownListの取扱商品をバインドしています。
6: Sub Page_Load()
7: If Not IsPostBack Then
8: BindDataGrid()
9: End If
10: End Sub
Sub BindDataGrid()の行13-15では、仕入先テーブルのレコードを抽出するSQLを生成しています。Where句では、SupplierID <= 10を指定していますので仕入先IDが1-10までのレコードが抽出されます。行16-17では、商品テーブルのレコードを抽出するSQLを生成しています。Where句では、Between 1 and 10を指定していますので、仕入先IDが1-10の商品が抽出されます。
行23-24では、OleDbDataAdapterのFill()メソッドでSQLのSelectステートメントを実行して仕入先テーブルのレコードを抽出してDataSetに格納しています。行25-26では、OleDbDataAdapterのSelectedCommandプロパティを書き換えて商品テーブルのレコードを抽出するSelectステートメントを実行しています。これでDataSetには、仕入先テーブルと商品テーブルが格納されます。
行28-32では、仕入先テーブルと商品テーブルのリレーションを設定しています。行28-29では、仕入先テーブルと商品テーブルの仕入先IDのDataColumnを生成しています。ds.Tables(“Suppliers”)では、仕入先のDataTableを生成します。Columns(“SupperID”)では、DataTableのColumnsコレクションから仕入先IDのDataColumnを生成しています。行30-31では、仕入先テーブルと商品テーブルのDataRelationを生成しています。仕入先テーブルと商品テーブルは、仕入先IDで結合します。行32では、DataSetのRelationsコレクションのAdd()メッドでDataRelationを追加しています。ここで追加したDataRelationは、GetProducts()関数で使用します。
行34-35では、仕入先テーブルのDataTableを生成して、DataGridのDataSourceプロパティに設定してDataBind()メソッドでバインドしています。DataGridのDataBind()メソッドを実行すると、DropDownListのバインドも自動的に実行されてGetProducts()関数が呼ばれます。
12: Sub BindDataGrid()
13: Dim strSqlSuppliers As String =
"Select * From Suppliers " & _
14: "Where SupplierID
<= 10 " & _
15: "Order by
SupplierID"
16: Dim strSqlProducts As String =
"Select * From Products " & _
17: "Where SupplierID
Between 1 and 10"
18: Dim con As New OleDbConnection( _
19:
ConfigurationSettings.AppSettings("conStringNw"))
20: Dim da As OleDbDataAdapter
21: Dim ds As New DataSet()
22:
23: da = New
OleDbDataAdapter(strSqlSuppliers, con)
24:
da.Fill(ds,"Suppliers")
25: da.SelectCommand = New
OleDbCommand(strSqlProducts, con)
26: da.Fill(ds,"Products")
27:
28: Dim dcSuppliers As DataColumn =
ds.Tables("Suppliers").Columns("SupplierID")
29: Dim dcProducts As DataColumn =
ds.Tables("Products").Columns("SupplierID")
30: Dim drel As DataRelation = new
DataRelation( _
31:
"SuppliersAndProducts", dcSuppliers, dcProducts)
32: ds.Relations.Add(drel)
33:
34: dgrdSuppliers.DataSource =
ds.Tables("Suppliers")
35: dgrdSuppliers.DataBind()
36: End Sub
GetProducts()関数では、ArrayListに仕入先の取扱商品を格納して返します。この関数の引数には、DataRowViewを指定します。行39では、DataRowViewのRowプロパティからDataRowを生成します。行40-41では、DataRowのGetChildRo
38: Function GetProducts(drv As DataRowView) As
ArrayList
39: Dim drSuppliers As DataRow =
drv.Row
40: Dim drProducts() As DataRow = _
41: drSuppliers.GetChildRo
42: Dim arrProducts As ArrayList = New
ArrayList()
43: Dim dr As DataRow
44:
45: For Each dr In drProducts
46:
arrProducts.Add(dr("ProductName"))
47: Next
48: return arrProducts
49: End Function
● DataGridのカラムにイメージを表示するサンプル
図 DataGridのカラムにイメージを表示するサンプル
このサンプルは、旅行アルバムテーブルに格納されている写真をDataGridに表示します。旅行アルバムテーブルには、写真を直接格納しないで写真のファイル名を格納しています。写真は、Imageコントロールを使用して表示しています。
このサンプルでは、以下のノウハウを習得することができます。
▲ DataGridにイメージを表示する方法
▲ ImageコントロールのImageUrlプロパティにイメージのパスをバインドする方法
サンプルの行32-53では、DataGridを定義しています。行39-52の<Columns>…</Columns>では、BoundColumn、TemplateColumnで旅行アルバムテーブルの旅行アルバムID、旅行アルバム名、写真を表示しています。行40-41のBoundColumnでは、旅行アルバムIDをバインドしています。行42-43のBoundColumnでは、旅行アルバム名をバインドしています。行44-51のTemplateColumnでは、写真を表示しています。行45-48のItemTemplateでは、Imageコントロールを定義しています。行47では、ImageのImageUrlプロパティにイメージのパスをバインドして写真を表示しています。旅行アルバムテーブルの写真(Picture)のフィールドには、イメージのファイル名（trav01.gif, trav02.gif,…）が格納されています。
32: <asp:DataGrid id="dgrdTravel"
runat="server"
33:
AutoGenerateColumns="False"
:::: >
39: <Columns>
40: <asp:BoundColumn
41:
DataField="ID" HeaderText="ID" />
42: <asp:BoundColumn
43:
DataField="Travel" HeaderText="旅行アルバム" />
44: <asp:TemplateColumn
HeaderText="写真">
45:
<ItemTemplate>
46: <asp:Image
runat="server"
47:
ImageUrl='<%# "images/" &
Container.DataItem("Picture") %> ' />
48:
</ItemTemplate>
49:
<ItemStyle HorizontalAlign="Center"
50:
BackColor="White" />
51:
</asp:TemplateColumn>
52: </Columns>
53:
</asp:DataGrid>
Tip
|
データベースにイメージを格納するとデータベースが肥大化するのを回避するには Accessのデータベース（*.MDB）にGif, Jpegなどのイメージを格納するとデータベースが肥大化して性能に影響与えます。この問題を回避するには、イメージを直接格納しないでイメージのファイル名を格納します。イメージを表示するには、Imageコントロールを使用して表示します。 |