DataGridをネストさせるには

 

  DataGridのカラムにDataGridをネストさせるサンプル

DataGridのカラムにDataGridをネストさせるサンプル

 

このサンプルは、DataGridのカラムにDataGridを表示してネストさせています。親のDataGridには、得意先テーブルから得意先IDと得意先(得意先名、郵便番号、都道府県、住所1、住所2、担当者名、役職、電話番号)を表示しています。受注情報のカラムには、子のDataGridを表示しています。子のDataGridには、受注テーブルから受注ID、受注日、希望日、出荷日を表示しています。このサンプルでは、得意先と受注情報のDataGridをネストさせていますが、受注情報に孫のDataGridをネストさせて受注明細を表示することもできます。

 

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

 

  DataGridのカラムにDataGridをネストさせて表示する方法

  ランタイム時にDataGridを生成してTemplateColumnに追加する方法

  DataGridの各種プロパティをランタイム時に設定する方法

  DataGridBoundColumnを生成して追加する方法

  BoundColumnの各種プロパティをランタイム時に設定する方法

  DataSetに得意先テーブルと受注テーブルを格納する方法

  DataSetからDataViewを生成する方法

  DataViewRowFilterプロパティの使い方

 

サンプルの行109-145では、DataGridを定義しています。行114では、DataGridOnItemDataBoundイベントを登録しています。このイベントでは、受注情報のDataGridを生成して親のDataGridに追加します。行118-144<Columns>…</Columns>では、BoundColumnTemplateColumnで得意先テーブルの得意先IDと得意先情報を表示しています。行119-122BoundColumnでは、得意先IDをバインドしています。行123-138TemplateColumnでは、得意先情報(得意先名、郵便番号、都道府県、住所1、住所2、担当者名、役職、電話番号)をバインドしています。行139-143TemplateColumnでは、受注情報のカラムを定義しています。行142には、ランタイム時に受注情報のDataGridが追加されます。

 

109: <asp:DataGrid id="dgrdCustomers" runat="server"

::::
114:   OnItemDataBound="dgrdCustomers_ItemDataBound" >
118:   <Columns>
119:     <asp:BoundColumn
120:       DataField="CustomerID"
121:       HeaderText="ID"
122:       ItemStyle-VerticalAlign="Top" />
123:     <asp:TemplateColumn
124:       HeaderText="
得意先"
125:       ItemStyle-VerticalAlign="Top">
126:       <ItemTemplate>
127:         <b>
128:         <%# DataBinder.Eval(Container.DataItem, "CompanyName") %>
129:         </b><br>
130:         <%# DataBinder.Eval(Container.DataItem, "PostalCode" ) %><br>
131:         <%# DataBinder.Eval(Container.DataItem, "Ken") %>
132:         <%# DataBinder.Eval(Container.DataItem, "Address1" ) %><br>
133:         <%# DataBinder.Eval(Container.DataItem, "Address2" ) %><br>
134:         <%# DataBinder.Eval(Container.DataItem, "ContactName" ) %><br>
135:         <%# DataBinder.Eval(Container.DataItem, "ContactTitle" ) %><br>
136:         <%# DataBinder.Eval(Container.DataItem, "Phone" ) %>
137:       </ItemTemplate>
138:     </asp:TemplateColumn>
139:     <asp:TemplateColumn
140:       HeaderText="
受注情報"

141:       ItemStyle-VerticalAlign="Top">
142:       <%--
ここに受注情報のDataGridがランタイム時に挿入されます --%>
143:     </asp:TemplateColumn>
144:   </Columns>
145: </asp:DataGrid>

 

Page_Load()イベントでは、得意先テーブルと受注テーブルのレコードを抽出してDataSetに格納しています。行19-20では、OleDbDataAdapterFill()メソッドでSQLSelectステートメントを実行して得意先テーブルをDataSetに格納しています。行21-22では、OleDbDataAdapterFill()メソッドで受注テーブルをDataSetに格納しています。行24-25では、DataGridDataSourceプロパティに得意先テーブルのDataTableを設定して、DataBind()メソッドでバインドしています。DataBind()メソッドを実行すると、DataGridOnItemDataBoundイベントが発生します。

 

9: Sub Page_Load()

::::
 19:   da = New OleDbDataAdapter(strSqlCustomers, con)
 20:   da.Fill(mds, "Customers")
 21:   da.SelectCommand = New OleDbCommand(strSqlOrders, con)
 22:   da.Fill(mds, "Orders")
 23:
 24
:   dgrdCustomers.DataSource = mds.Tables("Customers")

 25:   dgrdCustomers.DataBind()
 26: End Sub

 

OnItemDataBoundイベントでは、受注情報のDataGridを生成して親のDataGridに追加します。行32-97は、DataGridItemTypeItem/AlternatingItemのときに実行されます。行32では、受注情報のDataGridを生成しています。行34-54では、DataGridの各種プロパティを設定しています。行91-92では、DataSetTablesコレクションのDefaultViewプロパティで、受注テーブルのDataViewを生成しています。行93では、DataViewRowFilterプロパティに抽出条件を設定して受注テーブルを絞り込んでいます。受注テーブルは、「CustomerID=1」のように得意先IDで絞り込んでいます。e.Item.Cells(0).Textでは、DataGridから得意先IDを取得しています。行94-95では、DataGridDataSourceプロパティに受注テーブルのDataViewを設定してDataBind()メソッドでバインドしています。行97では、受注情報のDataGridを親のDataGridの3番目のカラムに追加しています。これで、得意先のDataGridに受注情報のDataGridがネストされて表示されます。

 

28: Sub dgrdCustomers_ItemDataBound( _
 29:   s As object, e As DataGridItemEventArgs)
 30:   If e.Item.ItemType = ListItemType.Item _
 31:     OrElse e.Item.ItemType = ListItemType.AlternatingItem Then
 32:     Dim dgrdOrders As New DataGrid
 33:     With dgrdOrders
 34:       .BorderWidth = Unit.Pixel(1)
 35:       .CellPadding = 4
 36:       .CellSpacing = 0
 37:       .GridLines = GridLines.Horizontal
 38:       .BorderColor = Color.FromName("Black")
 40:       .ShowHeader = True
 54:       .AutoGenerateColumns = False
           :::: BoundColumn
を生成して追加します:::
 91:       Dim dvwOrders As DataView = _
 92:         mds.Tables("Orders").DefaultView
 93:       dvwOrders.RowFilter = "CustomerID=" & e.Item.Cells(0).Text
 94:       .DataSource = dvwOrders
 95:       .DataBind()
 96:     End With
 97:     e.Item.Cells(2).Controls.Add(dgrdOrders)
 98:   End If
 99: End Sub

 

解説が前後しますが、56-62では、BoundColumnを生成して受注テーブルの受注IDをバインドしています。行56では、BoundColumnを生成しています。行57-61With…End Withでは、BoundColumnの各種プロパティを設定しています。行58では、BoundColumnHeaderTextプロパティに「ID」を設定しています。行59では、DataFieldプロパティに受注IDのフィールド名(OrderID)を設定しています。行60では、ItemStyleWrapプロパティにFalseを設定して折り返しを抑止しています。行62では、DataGridColumnsコレクションのAdd()メソッドで受注IDBoundColumnを追加しています。

 

56:       Dim bc As New BoundColumn()
 57:       With bc
 58:         .HeaderText = "ID"
 59:         .DataField = "OrderID"
 60:         .ItemStyle.Wrap = False
 61:       End With
 62:       .Columns.Add(bc)

64-71では、BoundColumnを生成して受注テーブルの受注日をバインドしています。行64では、BoundColumnを生成しています。行65-70With…End Withでは、BoundColumnの各種プロパティを設定しています。行66では、HeaderTextプロパティに「受注日」を設定しています。行67では、DataFieldプロパティに受注日のフィールド名(OrderDate)を設定しています。行68では、DataFormatStringプロパティに{0:d}を設定しています。{}0は、受注日の挿入場所を意味します。コロン(:)の後のdは、日付の書式(yyyy/mm/dd)を設定しています。行69では、ItemStyleWrapプロパティにFalseを設定して折り返しを抑止しています。行71では、DataGridに受注日のBoundColumnを追加しています。希望日、出荷日のBoundColumnも同じ手順で生成して、DataGridに追加しています。

 

64:       bc = New BoundColumn()
 65:       With bc
 66:         .HeaderText = "
受注日"
 67:         .DataField = "OrderDate"
 68:         .DataFormatString="{0:d}"
 69:         .ItemStyle.Wrap = False
 70:       End With
 71:       .Columns.Add(bc)

Tip

DataRowViewCreateChildView()メソッドを使用して受注情報を絞り込むには

 

このサンプルでは、受注情報を絞り込むのにDataViewRowFilterプロパティを使用しています。RowFilterプロパティを使用する代わりに、DataRowViewCreateChildView()メソッドを使用する方法もあります。CreateChildView()メソッドの引数には、Sub Page_Load()で追加したリレーションの名称(CustomerOrders)を指定します。

 

  9: Sub Page_Load()
       :::
 24:   mds.Relations.Add("CustomerOrders", _
 25:     mds.Tables("Customers").Columns("CustomerID"), _
 26:     mds.Tables("Orders").Columns("CustomerID"))
       ::::

 30: End Sub

 

32: Sub dgrdCustomers_ItemDataBound( _
 33:   s As object, e As DataGridItemEventArgs)
 34:   If e.Item.ItemType = ListItemType.Item _
 35:     OrElse e.Item.ItemType = ListItemType.AlternatingItem Then
 36:     Dim dgrdOrders As New DataGrid
 37:     With dgrdOrders

::::
 84:       .DataSource = CType(e.Item.DataItem, DataRowView).CreateChildView("CustomerOrders")
 85:       .DataBind()
 86:     End With
 87:     e.Item.Cells(2).Controls.Add(dgrdOrders)
 88:   End If
 89: End Sub

 

 

DataGrid2個ネストさせるサンプル

 

ダウンロードに2個のDataGridをネストさせるサンプルが収録されています。このサンプルは、得意先テーブル、受注テーブル、受注明細テーブルの情報を3個のDataGridに表示しています。受注テーブルと受注明細のDataGridDataSourceプロパティは、デザイン時に設定しています。

 

79:         <asp:DataGrid id="dgrdOrders" runat="server"
 89            DataSource='<%# CType(Container.DataItem, DataRowView).

CreateChildView("CustomerOrders") %>' >
 90:           <Columns>
110:             <asp:TemplateColumn HeaderText="
受注明細">
111:               <ItemTemplate>
112:                 <asp:DataGrid id="dgrdOrderDetails" runat="server"
121:                   AutoGenerateColumns="False"
122:                   DataSource='<%# CType(Container.DataItem, DataRowView).

CreateChildView("OrderDetails") %>' >
123:                   <Columns>
143:                   </Columns>
144:                 </asp:DataGrid>
145:               </ItemTemplate>
146:             </asp:TemplateColumn>
147:           </Columns>
148:         </asp:DataGrid>

 

 

ASP.NET DataGridのホームへ戻る