GridView Web サーバー コントロールにおけるカスタム列の作成

更新 : 2007 年 11 月

GridView コントロールは、データ ソースが提供するフィールドから自動的に列を生成できます。さらに、自動的に生成する代わりに表示する列のコレクションを明示的に作成することもできます。ただし、個々の列を表示する方法をカスタマイズする必要がある場合もあります。その場合は、TemplateField を作成して列のカスタム レイアウトを指定します。

テンプレートの作成

TemplateField オブジェクトを使用すると、GridView コントロールの列のレイアウトと動作をカスタマイズするためのマークアップとコントロールを含むテンプレートを指定できます。ItemTemplate を使用すると、GridView が列にデータを表示する際に使用するレイアウトを指定できます。ユーザーが列のデータを編集する際に使用するカスタム レイアウトを指定するには、EditItemTemplate を作成します。

テンプレートには、マークアップ、Web サーバー コントロール、およびコマンド ボタンを含めることができます。テンプレートの詳細については、「ASP.NET Web サーバー コントロール テンプレート」を参照してください。

テンプレートにおけるデータ バインディング

テンプレートでは、Eval メソッドと Bind メソッドを使用してデータにコントロールをバインドできます。コントロールが値だけを表示する場合は、Eval メソッドを使用します。データ更新のシナリオでユーザーがデータ値を変更できるようにする場合は、Bind メソッドを使用します。Eval メソッドは、データを表示するために任意のテンプレートで使用できます。TextBox コントロール、CheckBox コントロールなどのユーザーが値を変更する可能性があるコントロールを含むテンプレートまたはレコードの削除を許可するテンプレートでは Bind メソッドを使用します。詳細については、「データ バインド式の概要」を参照してください。

例

GridView コントロールの Columns コレクションの例を次に示します。このコレクションは TemplateField オブジェクトを含み、このオブジェクトはさらにItemTemplate オブジェクトを含みます。日付を表示するために、ItemTemplate には Eval メソッドを使用する Label コントロールが含まれます。他のテンプレートは、日付を編集するために、Bind メソッドを使用する Calendar コントロールを使用します。

<Columns>                  
  <asp:BoundField DataField="EmployeeID" HeaderText="Employee ID" ReadOnly="true"/>                    
  <asp:BoundField DataField="FirstName"  HeaderText="First Name"/>
  <asp:BoundField DataField="LastName"   HeaderText="Last Name"/>                    
  <asp:TemplateField HeaderText="Birth Date">
    <ItemTemplate> 
      <asp:Label ID="BirthDateLabel" Runat="Server" 
                 Text='<%# Eval("BirthDate", "{0:d}") %>' />
    </ItemTemplate>
    <EditItemTemplate>
      <asp:Calendar ID="EditBirthDateCalendar" Runat="Server"
                    VisibleDate='<%# Eval("BirthDate") %>'
                    SelectedDate='<%# Bind("BirthDate") %>' />
    </EditItemTemplate>
  </asp:TemplateField>   
  <asp:HyperLinkField Text="Show Detail"
                      DatahrefFormatString="~/ShowEmployeeDetail.aspx?EmployeeID={0}"
                      DatahrefFields="EmployeeID" />                   
</Columns> 

<Columns>                  
  <asp:BoundField DataField="EmployeeID" HeaderText="Employee ID" ReadOnly="true"/>                    
  <asp:BoundField DataField="FirstName"  HeaderText="First Name"/>
  <asp:BoundField DataField="LastName"   HeaderText="Last Name"/>                    
  <asp:TemplateField HeaderText="Birth Date">
    <ItemTemplate> 
      <asp:Label ID="BirthDateLabel" Runat="Server" 
                 Text='<%# Eval("BirthDate", "{0:d}") %>' />
    </ItemTemplate>
    <EditItemTemplate>
      <asp:Calendar ID="EditBirthDateCalendar" Runat="Server"
                    VisibleDate='<%# Eval("BirthDate") %>'
                    SelectedDate='<%# Bind("BirthDate") %>' />
    </EditItemTemplate>
  </asp:TemplateField> 
  <asp:HyperLinkField Text="Show Detail"
                      DatahrefFormatString="~/ShowEmployeeDetail.aspx?EmployeeID={0}"
                      DatahrefFields="EmployeeID" />                   
</Columns> 

参照

概念

ASP.NET のデータ バインド Web サーバー コントロールの概要

データ ソース コントロールの概要

参照

GridView Web サーバー コントロールの概要