Crear una columna personalizada en un control de servidor Web GridView

Actualización: noviembre 2007

El control GridView puede generar automáticamente columnas de los campos proporcionados por el origen de datos. Además, se puede crear una colección de columnas para mostrar en lugar de generarlas automáticamente. Sin embargo, es posible que se encuentre un escenario donde sea necesario personalizar cómo se muestra una columna individual. En ese caso, se puede crear un TemplateField para especificar un diseño de columna personalizado.

Crear plantillas

Un objeto TemplateField permite especificar plantillas que contienen el código de formato y los controles apropiados para personalizar el diseño y el comportamiento de una columna en un control GridView. Mediante el uso de una propiedad ItemTemplate, se puede especificar el diseño que se va a utilizar cuando el control GridView muestre datos en una columna. Para especificar un diseño personalizado cuando los usuarios editen datos en una columna, puede crear EditItemTemplate.

La plantilla puede contener código de formato, controles de servidor Web y botones de comando. Para obtener más información sobre las plantillas, vea Plantillas de controles de servidor Web ASP.NET.

Enlazar datos en una plantilla

En una plantilla, se pueden enlazar controles a datos utilizando los métodos Eval y Bind. Utilice el método Eval cuando el control sólo muestre valores. Utilice el método Bind cuando los usuarios puedan modificar un valor de los datos, es decir, para escenarios de actualización de datos. Utilice el método Eval en cualquiera de las plantillas para mostrar los datos. Utilice el método Bind en una plantilla con controles en que los usuarios puedan cambiar valores, como los controles TextBox y CheckBox, o en una plantilla que permita eliminar un registro. Para obtener más información, vea Información general sobre las expresiones de enlace de datos.

Ejemplo

En el ejemplo siguiente se muestra la colección Columns de un control GridView. La colección contiene un objeto TemplateField que, a su vez, contiene un objeto ItemTemplate. Para mostrar una fecha, ItemTemplate incluye un control Label que utiliza el método Eval. Para editar una fecha, las otras plantillas utilizan un control Calendar que utiliza el método Bind.

<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> 

Vea también

Conceptos

Información general sobre los controles de servidor Web ASP.NET enlazados a datos

Información general sobre los controles de origen de datos

Referencia

Información general sobre GridView (Control de servidor Web)