ASP.NET DataGridのホームへ戻る

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

 

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

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

 

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

 

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

 

  DataGridTemplateColumnの使い方

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

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

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

  IsDbNull()関数の使い方

 

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

 

65-74TemplateColumnでは、得意先テーブルから住所の情報を表示しています。行66-73ItemTemplateでは、StringクラスのFormat()メソッドで得意先の郵便番号、都道府県、住所1、住所2を表示しています。引数{0},{1},{2},{3}には、郵便番号、都道府県、住所1、住所2が挿入されます。各フィールドの間には、<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では、DataGridOnItemDataBoundイベントを登録しています。このイベントでは、DataGridの見出しのカラムを結合します。行55-69<Columns>…</Columns>では、BoundColumnTemplateColumnで得意先テーブルを表示しています。行56-58BoundColumnでは、得意先IDをバインドしています。行59-60BoundColumnでは、得意先名をバインドしています。行61-62BoundColumnでは、都道府県をバインドしています。BoundColumnHeaderTextプロパティには、空白を設定しています。都道府県と住所の見出しは、OnItemDataBoundイベントで結合しますので、都道府県の見出しは不要です。行63-68TemplateColumnでは、住所1と住所2をバインドしています。

 

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>

 

DataGridOnItemDataBoundイベントでは、都道府県と住所の見出しを結合します。行26では、ItemTypeを変数に保存しています。行28-31は、ItemTypeHeaderのときに実行されます。行28では、都道府県のセルを変数に保存しています。行29-31では、都道府県のセルを削除して住所のセルと結合しています。セルを削除するには、TableCellCollectionRemove()メソッドを使用します。都道府県と住所のセルを結合するには、TabelCellColumnSpanプロパティに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

ASP.NET DataGridのホームへ戻る