DataGridをネストさせるには
● DataGridのカラムにDataGridをネストさせるサンプル
図 DataGridのカラムにDataGridをネストさせるサンプル
このサンプルは、DataGridのカラムにDataGridを表示してネストさせています。親のDataGridには、得意先テーブルから得意先IDと得意先（得意先名、郵便番号、都道府県、住所１、住所２、担当者名、役職、電話番号）を表示しています。受注情報のカラムには、子のDataGridを表示しています。子のDataGridには、受注テーブルから受注ID、受注日、希望日、出荷日を表示しています。このサンプルでは、得意先と受注情報のDataGridをネストさせていますが、受注情報に孫のDataGridをネストさせて受注明細を表示することもできます。
このサンプルでは、以下のノウハウを習得することができます。
▲ DataGridのカラムにDataGridをネストさせて表示する方法
▲ ランタイム時にDataGridを生成してTemplateColumnに追加する方法
▲ DataGridの各種プロパティをランタイム時に設定する方法
▲ DataGridにBoundColumnを生成して追加する方法
▲ BoundColumnの各種プロパティをランタイム時に設定する方法
▲ DataSetに得意先テーブルと受注テーブルを格納する方法
▲ DataSetからDataViewを生成する方法
▲ DataViewのRowFilterプロパティの使い方
サンプルの行109-145では、DataGridを定義しています。行114では、DataGridのOnItemDataBoundイベントを登録しています。このイベントでは、受注情報のDataGridを生成して親のDataGridに追加します。行118-144の<Columns>…</Columns>では、BoundColumn、TemplateColumnで得意先テーブルの得意先IDと得意先情報を表示しています。行119-122のBoundColumnでは、得意先IDをバインドしています。行123-138のTemplateColumnでは、得意先情報（得意先名、郵便番号、都道府県、住所１、住所２、担当者名、役職、電話番号）をバインドしています。行139-143のTemplateColumnでは、受注情報のカラムを定義しています。行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では、OleDbDataAdapterのFill()メソッドでSQLのSelectステートメントを実行して得意先テーブルをDataSetに格納しています。行21-22では、OleDbDataAdapterのFill()メソッドで受注テーブルをDataSetに格納しています。行24-25では、DataGridのDataSourceプロパティに得意先テーブルのDataTableを設定して、DataBind()メソッドでバインドしています。DataBind()メソッドを実行すると、DataGridのOnItemDataBoundイベントが発生します。
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")
24
25: dgrdCustomers.DataBind()
26: End Sub
OnItemDataBoundイベントでは、受注情報のDataGridを生成して親のDataGridに追加します。行32-97は、DataGridのItemTypeがItem/AlternatingItemのときに実行されます。行32では、受注情報のDataGridを生成しています。行34-54では、DataGridの各種プロパティを設定しています。行91-92では、DataSetのTablesコレクションのDefaultViewプロパティで、受注テーブルのDataViewを生成しています。行93では、DataViewのRowFilterプロパティに抽出条件を設定して受注テーブルを絞り込んでいます。受注テーブルは、「CustomerID=1」のように得意先IDで絞り込んでいます。e.Item.Cells(0).Textでは、DataGridから得意先IDを取得しています。行94-95では、DataGridのDataSourceプロパティに受注テーブルのDataViewを設定してDataBind()メソッドでバインドしています。行97では、受注情報のDataGridを親のDataGridの３番目のカラムに追加しています。これで、得意先の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-61のWith…End Withでは、BoundColumnの各種プロパティを設定しています。行58では、BoundColumnのHeaderTextプロパティに「ID」を設定しています。行59では、DataFieldプロパティに受注IDのフィールド名(OrderID)を設定しています。行60では、ItemStyleのWrapプロパティにFalseを設定して折り返しを抑止しています。行62では、DataGridのColumnsコレクションのAdd()メソッドで受注IDのBoundColumnを追加しています。
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-70のWith…End Withでは、BoundColumnの各種プロパティを設定しています。行66では、HeaderTextプロパティに「受注日」を設定しています。行67では、DataFieldプロパティに受注日のフィールド名(OrderDate)を設定しています。行68では、DataFormatStringプロパティに{0:d}を設定しています。{}の0は、受注日の挿入場所を意味します。コロン(:)の後のdは、日付の書式(yyyy/mm/dd)を設定しています。行69では、ItemStyleのWrapプロパティに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
|
DataRowViewのCreateChildView()メソッドを使用して受注情報を絞り込むには このサンプルでは、受注情報を絞り込むのにDataViewのRowFilterプロパティを使用しています。RowFilterプロパティを使用する代わりに、DataRowViewのCreateChildView()メソッドを使用する方法もあります。CreateChildView()メソッドの引数には、Sub Page_Load()で追加したリレーションの名称(CustomerOrders)を指定します。 9: Sub Page_Load() 30: End Sub 32: Sub dgrdCustomers_ItemDataBound( _ :::: |
|
DataGridを2個ネストさせるサンプル ダウンロードに2個のDataGridをネストさせるサンプルが収録されています。このサンプルは、得意先テーブル、受注テーブル、受注明細テーブルの情報を3個のDataGridに表示しています。受注テーブルと受注明細のDataGridのDataSourceプロパティは、デザイン時に設定しています。 79:
<asp:DataGrid id="dgrdOrders" runat="server"
|
CreateChildView("CustomerOrders")
%>