DataGridのカラムに複数のフィールドを表示するには

 

●  DataGridのカラムに複数のフィールドを改行して表示するサンプル

図 DataGridのカラムに複数のフィールドを改行して表示するサンプル

 

このサンプルは、得意先テーブルの複数のフィールドを改行して表示します。レコードのフィールドを複数行に改行して表示することにより、横長のDataGridを縦長のDataGridにすることができます。

 

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

 

▲  DataGridのTemplateColumnの使い方

▲  ItemTemplateで複数のフィールドを改行して表示する方法

▲  StringクラスのFormat()メソッドの使い方

▲  StringクラスのInsert()メソッドの使い方

▲  IsDbNull()関数の使い方

 

サンプルの行42-76では、DataGridを定義しています。行51-75の<Columns>…</Columns>では、BoundColumn、TemplateColumnで得意先テーブルを表示しています。行52-55のBoundColumnでは、得意先テーブルの得意先IDをバインドしています。行56-64のTemplateColumnでは、得意先テーブルから得意先情報を表示しています。行57-63のItemTemplateでは、StringクラスのFormat()メッドで得意先名、担当者名、電話番号を表示しています。引数の{0},{1},{2}には、得意先名、担当者名、電話番号が挿入されます。各フィールドの間に、HTMLの<br>タグを挿入して改行しています。

 

行65-74のTemplateColumnでは、得意先テーブルから住所の情報を表示しています。行66-73のItemTemplateでは、StringクラスのFormat()メソッドで得意先の郵便番号、都道府県、住所１、住所２を表示しています。引数{0},{1},{2},{3}には、郵便番号、都道府県、住所１、住所２が挿入されます。各フィールドの間には、<br>タグを挿入して改行しています。行68では、FormatPostalCode()関数を呼び出して郵便番号を999-9999の形式にフォーマットしています。

 

CType(objPostalCode,String).Insert(4,"-")

 

FormatPostalCode()関数を使用しないで、StringクラスのInsert()メソッドでハイフン(-)を挿入すると郵便番号がNullのときに異常終了します。

 

42: <asp:DataGrid id="dgrdCustomers" runat="server"
 43:   AutoGenerateColumns="False"
       :::: >
 51:   <Columns>
 52:     <asp:BoundColumn
 53:       DataField="CustomerID"
 54:       HeaderText="ID"
 55:       ItemStyle-HorizontalAlign="Right" />
 56:     <asp:TemplateColumn HeaderText="得意先">
 57:       <ItemTemplate>
 58:         <%# String.Format("{0}<br>{1}<br>{2}", _
 59:           Container.DataItem("CompanyName"), _
 60:           Container.DataItem("ContactName"), _
 61:           Container.DataItem("Phone"))
 62:         %>
 63:       </ItemTemplate>
 64:     </asp:TemplateColumn>
 65:     <asp:TemplateColumn HeaderText="住所">
 66:       <ItemTemplate>
 67:         <%# String.Format("〒{0}<br>{1}<br>{2}<br>{3}", _
 68:           FormatPostalCode(Container.DataItem("PostalCode")) , _
 69:           Container.DataItem("Ken"), _
 70:           Container.DataItem("Address1"), _
 71:           Container.DataItem("Address2") )
 72:         %>
 73:       </ItemTemplate>
 74:     </asp:TemplateColumn>
 75:   </Columns>
 76: </asp:DataGrid>

 

FormatPostalCode()関数の行28では、IsDbNull()関数を使用して郵便番号がNullかチェックしています。郵便番号がNullのとき空白(String.Empty)を返します。郵便番号がNull以外のときは、StringクラスのInsert()メソッドでハイフン(-)を挿入して返します。

 

27: Function FormatPostalCode(objPostalCode As Object) As String
 28:   If IsDbNull(objPostalCode) Then
 29:     Return String.Empty
 30:   Else
 31:     Return CType(objPostalCode,String).Insert(4,"-")
 32:   End If
 33: End Function

 

 

●  DataGridのカラムに複数のフィールドを結合して表示するサンプル

図 DataGridのカラムに複数のフィールドを結合して表示するサンプル

 

このサンプルは、得意先テーブルをDataGridに表示しています。都道府県と住所の見出しは、結合して表示しています。DataGridのアイテムには、都道府県と住所が分離されて表示されますので住所がインデントされます。つまり、都道府県の長さが異なっても住所のカラムが揃えられます。

 

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

 

▲  住所のカラムに都道府県と住所を分離して表示する方法

▲  DataGridのカラムを結合する方法

 

サンプルの行47-70では、DataGridを定義しています。行50では、DataGridにOnItemDataBoundイベントを登録しています。このイベントでは、DataGridの見出しのカラムを結合します。行55-69の<Columns>…</Columns>では、BoundColumn、TemplateColumnで得意先テーブルを表示しています。行56-58のBoundColumnでは、得意先IDをバインドしています。行59-60のBoundColumnでは、得意先名をバインドしています。行61-62のBoundColumnでは、都道府県をバインドしています。BoundColumnのHeaderTextプロパティには、空白を設定しています。都道府県と住所の見出しは、OnItemDataBoundイベントで結合しますので、都道府県の見出しは不要です。行63-68のTemplateColumnでは、住所１と住所２をバインドしています。

 

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

::::
 50:   OnItemDataBound="dgrdCustomers_ItemDataBound"
       :::: >
 55:   <Columns>
 56:     <asp:BoundColumn
 57:       DataField="CustomerID" HeaderText="ID"
 58:       ItemStyle-HorizontalAlign="Right" />
 59:     <asp:BoundColumn
 60:       DataField="CompanyName" HeaderText="得意先名" />
 61:     <asp:BoundColumn
 62:       DataField="Ken" HeaderText="" />
 63:     <asp:TemplateColumn HeaderText="住所">
 64:       <ItemTemplate>
 65:         <%# Container.DataItem("Address1") %>
 66:         <%# Container.DataItem("Address2") %>
 67:       </ItemTemplate>
 68:     </asp:TemplateColumn>
 69:   </Columns>
 70: </asp:DataGrid>

 

DataGridのOnItemDataBoundイベントでは、都道府県と住所の見出しを結合します。行26では、ItemTypeを変数に保存しています。行28-31は、ItemTypeがHeaderのときに実行されます。行28では、都道府県のセルを変数に保存しています。行29-31では、都道府県のセルを削除して住所のセルと結合しています。セルを削除するには、TableCellCollectionのRemove()メソッドを使用します。都道府県と住所のセルを結合するには、TabelCellのColumnSpanプロパティに2を設定します。これで、都道府県と住所の見出しが結合されて表示されます。DataGridのアイテムは、都道府県と住所が分離されていますので、住所がインデントされて表示されます。

 

25: Sub dgrdCustomers_ItemDataBound(s As Object, e As DataGridItemEventArgs)
 26:   Dim lit As ListItemType = e.Item.ItemType
 27:   If lit = ListItemType.Header Then
 28:     Dim tc As TableCell = e.Item.Cells(2)
 29:     e.Item.Cells.Remove(tc)
 30:     tc = e.Item.Cells(2)
 31:     tc.ColumnSpan = 2
 37:   End If
 38: End Sub