DataGridのカラムにCheckBox/DropDownList/Imageを表示するには

 

  DataGridのカラムにCheckBoxを表示するサンプル

 

DataGridのカラムにCheckBoxを表示するサンプル

 

データベースのYes/No型のフィールドをBoundColumnで表示するとYes/No(True/False)が表示されます。このサンプルでは、生産中止のフィールドをTrue/False形式で表示する代わりにCheckBoxで表示して見易くしています。

 

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

 

  DataGridCheckBoxを表示する方法

 

サンプルの行41-63では、DataGridを定義しています。行48-62<Columns>…</Columns>では、BoundColumnTemplateColumnで商品テーブルの商品ID、商品名、生産中止フラグを表示しています。行49-51BoundColumnでは、商品IDをバインドしています。行52-53BoundColumnでは、商品名をバインドしています。行54-61TemplateColumnでは、生産中止フラグを表示しています。行56-60ItemTemplateでは、CheckBoxを定義しています。行59では、CheckBoxCheckedプロパティに生産中止フラグをバインドしています。生産中止フラグには、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="生産中止"
 55:       ItemStyle-HorizontalAlign="Center">
 56:       <ItemTemplate>
 57:         <asp:CheckBox runat="server"
 58:           Enabled="False"
 59:           Checked='<%# CType(Container.DataItem("Discontinued"), Boolean) %>' />
 60:       </ItemTemplate>
 61:     </asp:TemplateColumn>

 

 

  DataGridのカラムにDropDownListを表示するサンプル

DataGridのカラムにDropDownListを表示するサンプル

 

このサンプルでは、仕入先の取扱商品をDropDownListで表示しています。DataGridDropDownListをクリックすると、仕入先の取扱商品が一覧に表示されます。

 

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

 

  DataGridDropDownListを表示する方法

  DropDownListDataSourceプロパティに関数をバインドする方法

  DataSetに仕入先テーブルと商品テーブルを格納する方法

  仕入先テーブルと商品テーブルにリレーションを設定する方法

  DataRowGetChildRows()メソッドの使い方

 

サンプルの行58-80では、DataGridを定義しています。行64-79<Columns>…</Columns>では、BoundColumnTemplateColumnで仕入先テーブルの仕入先ID、仕入先名とDropDownListを表示しています。行65-68BoundColumnでは、仕入先IDをバインドしています。行69-70BoundColumnでは、仕入先名をバインドしています。行71-78TemplateColumnでは、取扱商品を表示しています。行72-77ItemTemplateでは、DropDownListを定義しています。行76では、DropDownListDataSourceプロパティにGetProducts()関数をバインドしています。関数の引数には、DataRowViewを指定しています。GetProducts()関数は、仕入先の取扱商品をArrayListに格納して返します。つまり、DataSourceArrayListをバインドします。

 

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を指定していますので仕入先ID1-10までのレコードが抽出されます。行16-17では、商品テーブルのレコードを抽出するSQLを生成しています。Where句では、Between 1 and 10を指定していますので、仕入先ID1-10の商品が抽出されます。

 

23-24では、OleDbDataAdapterFill()メソッドでSQLSelectステートメントを実行して仕入先テーブルのレコードを抽出してDataSetに格納しています。行25-26では、OleDbDataAdapterSelectedCommandプロパティを書き換えて商品テーブルのレコードを抽出するSelectステートメントを実行しています。これでDataSetには、仕入先テーブルと商品テーブルが格納されます。

 

28-32では、仕入先テーブルと商品テーブルのリレーションを設定しています。行28-29では、仕入先テーブルと商品テーブルの仕入先IDDataColumnを生成しています。ds.Tables(“Suppliers”)では、仕入先のDataTableを生成します。Columns(“SupperID”)では、DataTableColumnsコレクションから仕入先IDDataColumnを生成しています。行30-31では、仕入先テーブルと商品テーブルのDataRelationを生成しています。仕入先テーブルと商品テーブルは、仕入先IDで結合します。行32では、DataSetRelationsコレクションのAdd()メッドでDataRelationを追加しています。ここで追加したDataRelationは、GetProducts()関数で使用します。

 

34-35では、仕入先テーブルのDataTableを生成して、DataGridDataSourceプロパティに設定してDataBind()メソッドでバインドしています。DataGridDataBind()メソッドを実行すると、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では、DataRowViewRowプロパティからDataRowを生成します。行40-41では、DataRowGetChildRows()メソッドで仕入先の取扱商品を取得してDataRowコレクションに格納しています。行45-47For…Nextでは、ArrayListに取扱商品名を格納しています。行46dr(“ProductName”)は、DataRowから商品名を取得します。arrProducts.Add()は、ArralyListAdd()メッドで商品名を追加します。行48では、取扱商品が格納されているArrayListを返します。

 

38: Function GetProducts(drv As DataRowView) As ArrayList
 39:   Dim drSuppliers As DataRow = drv.Row
 40:   Dim drProducts() As DataRow = _
 41:     drSuppliers.GetChildRows("SuppliersAndProducts")
 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>では、BoundColumnTemplateColumnで旅行アルバムテーブルの旅行アルバムID、旅行アルバム名、写真を表示しています。行40-41BoundColumnでは、旅行アルバムIDをバインドしています。行42-43BoundColumnでは、旅行アルバム名をバインドしています。行44-51TemplateColumnでは、写真を表示しています。行45-48ItemTemplateでは、Imageコントロールを定義しています。行47では、ImageImageUrlプロパティにイメージのパスをバインドして写真を表示しています。旅行アルバムテーブルの写真(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コントロールを使用して表示します。

 

 

ASP.NET DataGridのホームへ戻る