DataGrid 上の行を２段に表示する方法

　ASP.NET の DataGridコントロールで、同一レコードの列の値を２段（２行）で表示するには、TemplateColumn を利用します。
　TemplateColumn を利用して、DataGrid コントロールが生成するHTMLソースの行データ <tr>～</tr> タグ内に、</tr><tr> タグを挿入することで、１行のデータを２行に分割表示することができます。
  例えば、４列のデータ定義した DataGrid コントロールは、下記の様な<table>～</table>タグで囲まれたデータを生成してクライアントに送ります。
　　　<table>
　　　　　<tr>
　　　　　　　<td>～</td>
　　　　　　　<td>～</td>
　　　　　　　<td>～</td>
　　　　　　　<td>～</td>
　　　　　</tr>
　　　　　<tr>
　　　　　　　<td>～</td>
　　　　　　　<td>～</td>
　　　　　　　<td>～</td>
　　　　　　　<td>～</td>
　　　　　</tr>
　　　　　　・
　　　　　　・
　　　　　　・
　　　</table>

  ここで、４列のデータを２列２段で表示する為には、下記の様な<table>～</table>タグで囲まれたデータをクライアントに送る必要があります。
　　　<table>
　　　　　<tr>
　　　　　　　<td>～</td>
　　　　　　　<td>～</td>
　　　　　</tr>
　　　　　<tr>
　　　　　　　<td>～</td>
　　　　　　　<td>～</td>
　　　　　</tr>
　　　　　<tr>
　　　　　　　<td>～</td>
　　　　　　　<td>～</td>
　　　　　</tr>
　　　　　<tr>
　　　　　　　<td>～</td>
　　　　　　　<td>～</td>
　　　　　</tr>
　　　　　　・
　　　　　　・
　　　　　　・
　　　</table>

　従って、DataGrid の２列、３列のデータを設定する時に、TemplateColumn を利用して、下記の様に設定します。ヘッダーテキストおよび列データ間にそれぞれ</tr><tr> タグを挿入します。この時、列データの前後に自動生成される<td></td>タグも合わせて設定します。
　　<asp:TemplateColumn HeaderText="列２&lt;/TD&gt;&lt;/TR&gt;&lt;TR&gt;&lt;TD&gt;列３">
　　　　<ItemTemplate>
　　　　　　　　　<%# DataBinder.Eval(Container.DataItem, "列データ２") %>
　　　　　　　</TD></TR>
　　　　　　　<TR><TD>
　　　　　　　　　<%# DataBinder.Eval(Container.DataItem, "列データ３") %>
　　　　</ItemTemplate>
　　</asp:TemplateColumn>
【使い方】

例：TemplateColumn を使って１行のデータを２段（２行）に表示します。
<!--
　TemplateColumnの記入例

　　上下２段に分割する位置の前後の列データを１つの TemplateColumn で定義します。
　　ヘッダーテキストおよび列データで、下段となる <tr></tr> には、それぞれスタイル属性を個別に定義する必要があります。
　　スタイル属性は直接<tr>タグ内に記述します。
-->
<asp:TemplateColumn HeaderText="列２&lt;/TD&gt;&lt;/TR&gt;&lt;TR&gt;&lt;TD style=&quot;width:80px;&quot;&gt;３列">
    <HeaderStyle Width="80%"></HeaderStyle>
    <ItemTemplate>
            <%# DataBinder.Eval(Container.DataItem, "列データ２") %>
        </TD></TR>
        <TR><TD>
            <%# DataBinder.Eval(Container.DataItem, "列データ３") %>
    </ItemTemplate>
    <EditItemTemplate>
            <asp:TextBox Text='<%# DataBinder.Eval(Container.DataItem, "列データ２") %>' runat="server" Width="100%"/>
        </TD></TR>
        <TR><TD>
            <asp:TextBox Text='<%# DataBinder.Eval(Container.DataItem, "列データ３") %>' runat="server" Width="100%"/>
    </EditItemTemplate>
</asp:TemplateColumn>
【補足】
　DataGrid コントロールの AlternatingItemStyle 等を利用して、行毎にスタイルを変える場合、上記の様に固定的にスタイルを定義する方法は使えません。これを実現するには、TemplateColumn には、属性を定義せずに </tr><tr> タグのみ定義し、ItemDataBound イベントを使って、レコード毎に判断し、コントロール内の <tr> タグを検索／置換することで、スタイル属性を設定する必要があります。
戻る