Compartir a través de


Introducción al control DataGrid de servidor Web

El control DataGrid de servidor Web muestra datos con un diseño tabular. De forma predeterminada, el control DataGrid muestra los datos en modo de sólo lectura, pero también puede mostrar automáticamente los datos en controles editables en tiempo de ejecución. El control DataGrid puede crear también automáticamente los botones Seleccionar, Editar, Actualizar y Cancelar, así como la estructura de programación, mediante el cuadro de diálogo Generador de propiedades. Además, el control DataGrid admite la paginación, aunque también es posible utilizar las funciones de exploración personalizadas del control para mejorar el rendimiento, mediante el control de la cantidad de datos que se envían al explorador cliente.

**Nota   **Para tener un control completo sobre el código HTML producido por la lista, utilice el control de servidor Web Repeater. Utilice el control DataList para mostrar datos con un diseño diferente al tabular. Para obtener más información, vea Controles para mostrar listas en páginas Web.

Las secciones siguientes presentan las características del control DataGrid.

Enlazar datos al control

El control de servidor Web DataGrid debe enlazarse a un origen de datos mediante su propiedad DataSource o no se representará en la página. Orígenes de datos habituales para DataGrid son DataSet y los lectores de datos. Puede utilizar orígenes de datos disponibles en el Cuadro de herramientas, tales como las clases DataSet y DataView. También puede enlazar con orígenes de datos en el código, tales como un lector de datos o una matriz. El control puede utilizar como origen de datos cualquier clase que admita la interfaz IEnumerable.

Cuando se enlaza con datos, se especifica un origen de datos para el control DataGrid como un todo. La cuadrícula muestra una fila (un elemento) por cada fila del origen de datos. De forma predeterminada, el control DataGrid genera una columna enlazada por cada campo del origen de datos. Sin embargo, es posible seleccionar los campos del origen de datos que generarán columnas en la cuadrícula. Para obtener más información acerca del enlace de datos, vea Introducción al acceso a datos en las páginas de formularios Web Forms.

Cuando se ejecuta la página Web, el código debe llamar al método DataBind del control para cargar la cuadrícula con datos. Llame al método otra vez si los datos cambian (por ejemplo, en un controlador de eventos) para actualizar la cuadrícula.

Como parte del enlace a datos, puede especificar una propiedad DataKeyField Esta propiedad permite especificar información que identifique de forma única cada elemento de la cuadrícula. La información no tiene porqué ser parte de la que se muestra en la cuadrícula. Puede consistir en el nombre de un campo del origen de datos (tal como una clave principal). Puede utilizar esta información para actualizar un elemento específico del origen de datos. Por ejemplo, si establece DataKeyField en customerId, más tarde podrá actualizar el registro donde customerID=DataGrid1.DataKeys[DataGrid1.SelectedIndex].

Como ocurre con otros controles de servidor, el enlace a datos en el control DataGrid tiene un solo sentido; es decir, el enlace a datos es de sólo lectura. Si va a utilizar la cuadrícula para permitir que los usuarios editen los datos, deberá crear código propio para actualizar el origen de datos. Después de actualizar el origen de datos, enlace otra vez los datos al origen de datos. La lógica de actualización suele aprovechar DataKeyField para buscar el registro correcto mediante el valor clave.

Para obtener información detallada acerca de la actualización de datos mediante el control DataGrid, vea "Editar elementos" más adelante. Para obtener información general acerca del enlace de datos de controles de servidor Web, vea Acceso a datos en las páginas de formularios Web Forms.

Elementos de formato

La ficha Formato del cuadro de diálogo del Generador de propiedades controla el diseño de las filas del control DataGrid. Estas configuraciones especifican el color, la fuente y la alineación de las filas. El control real, el texto y el contenido de datos de la fila se especifican en la ficha Columnas del Generador de propiedades. Es posible configurar los elementos siguientes:

  • DataGrid   Estas configuraciones se aplican a toda la cuadrícula. Los otros formatos de elemento anulan estas configuraciones.
  • Encabezado   El encabezado es la fila superior del control DataGrid y no muestra la fila de datos del origen de datos. Debe indicar en la ficha General del Generador de propiedades si desea que se muestre la fila Encabezado. Se muestra de manera predeterminada.
  • Pie   El pie es la fila inferior del control DataGrid y no muestra la fila de datos del origen de datos. Debe indicar en la ficha General del Generador de propiedades si desea que se muestre la fila Pie. No se muestra de manera predeterminada.
  • Paginación   Si sólo va a mostrar algunas filas del origen de datos a la vez, mediante las capacidades de paginación del control DataGrid, utilice este elemento para controlar la apariencia de los controles de paginación.
  • Elementos   Estos cuatro elementos especifican cómo aparecerán las filas de datos. Estos pasos son los siguientes:
    • Elementos normales   Este formato se aplica a todas las filas de datos de la tabla, a menos que lo reemplace otro elemento.
    • Elementos alternos   Este formato se aplica a elementos alternos del control.
    • Elementos seleccionados   Este formato se aplica al elemento seleccionado en el control.
    • Elementos en modo de edición   Este formato se aplica al elemento que se está editando.
  • Columnas   Este elemento permite especificar el formato de las columnas creadas en la ficha Columnas del Generador de propiedades.

Para obtener más información acerca del uso de formatos de elemento, vea Especificar el formato de un elemento de cuadrícula en un control DataGrid de servidor Web y Especificar el comportamiento de paginación en un control DataGrid de servidor Web.

Columnas

El control DataGrid permite especificar de varias maneras las columnas que se van a mostrar. De forma predeterminada, las columnas se generan automáticamente sobre la base de los campos del origen de datos. No obstante, para controlar el contenido y el diseño de las columnas con más precisión, puede definir los siguientes tipos de columnas:

Tipo de columna Description
Columna enlazada Permite especificar qué campo del origen de datos va a mostrar. Permite especificar el formato del campo, mediante una expresión de formato .NET. Para obtener información detallada, vea Agregar columnas plantilla a un control DataGrid de servidor Web.
Columna hipervínculo Muestra información en forma de hipervínculos. Un uso habitual consiste en mostrar datos (tales como el número de cliente o el nombre de producto) en forma de hipervínculo en el que los usuarios pueden hacer clic para desplazarse a una página separada, que proporciona información detallada acerca del elemento. Para obtener información detallada, vea    Agregar columnas hipervínculo a un control DataGrid de servidor Web.
Columna botón Permite agregar un botón para cada elemento de la cuadrícula y definir funcionalidad personalizada para el botón. Por ejemplo, podría crear un botón con la etiqueta "Agregar a la compra" que ejecute una lógica personalizada cuando el usuario haga clic en él. También puede agregar botones predefinidos para las funciones Seleccionar, Editar, Actualizar, Cancelar y Eliminar. Para obtener información detallada, vea Agregar columnas botón a un control DataGrid de servidor Web.
Columna Editar, Actualizar, Cancelar Permite crear edición sobre el terreno. Para obtener más información, vea "Editar elementos", que se muestra a continuación.
Columna plantilla Permite crear combinaciones de texto HTML y controles de servidor para crear un diseño personalizado para una columna. Los controles de una columna plantilla pueden estar enlazados a datos. Las columnas plantilla ofrecen una gran flexibilidad para definir el diseño y la funcionalidad del contenido de la cuadrícula, porque permiten un control completo sobre el modo en que se muestran los datos y sobre lo que ocurre cuando los usuarios interactúan con las filas de la cuadrícula. Para obtener información detallada, vea Agregar columnas plantilla a un control DataGrid de servidor Web.

Para obtener más información sobre columnas, vea Columnas DataGrid.

Eventos

El control DataGrid admite varios eventos. Uno de ellos, ItemCreated, proporciona un medio para personalizar el proceso de creación de elementos. El evento ItemDataBound ofrece también la capacidad de personalizar los elementos del control DataGrid, pero después de que los datos estén disponibles para la inspección. Por ejemplo, si estuviera utilizando el control DataGrid para mostrar una lista de tareas pendientes, podría mostrar los elementos atrasados con texto en rojo, los elementos completados en negro y el resto con texto en verde.

Los eventos restantes se producen en respuesta a clics en botones o LinkButton en elementos de la cuadrícula. Están diseñados para facilitar la implementación de tareas comunes de manipulación de datos. Se admiten cuatro eventos de este tipo:

  • EditCommand
  • DeleteCommand
  • UpdateCommand
  • CancelCommand

El cuadro de diálogo Generador de propiedades del control DataGrid generará la estructura de botón necesaria para producir estos eventos en tiempo de ejecución. Cuando el usuario hace clic en uno de los botones (cuyas etiquetas predeterminadas son Editar, Eliminar, Actualizar y Cancelar, respectivamente), se produce el evento correspondiente.

El control DataGrid admite también el evento ItemCommand, que se produce cuando un usuario hace clic en un botón que no es uno de los botones predefinidos anteriores. Puede utilizar este evento para crear funcionalidad personalizada; para ello, establezca la propiedad CommandName de un botón en el valor que necesite y, a continuación, pruébelo en el controlador de evento ItemCommand. (Por ejemplo, podría utilizar este enfoque al seleccionar un elemento, tal como se documenta en Permitir a los usuarios seleccionar elementos en un control DataList de servidor Web).

Para obtener una lista completa de los eventos que admite el control DataGrid, vea Eventos DataList. Para obtener más información sobre los eventos, vea Modelo de eventos de controles de servidor ASP.NET. Para obtener información detallada sobre la compatibilidad de estos eventos con el control DataGrid, vea Permitir a los usuarios seleccionar elementos en un control DataGrid de servidor Web,Permitir a los usuarios editar elementos en un control DataGrid de servidor Web y Permitir a los usuarios eliminar elementos en un control DataGrid de servidor Web.

Editar elementos

Puede permitir a los usuarios que editen el contenido de filas individuales en un elemento de cuadrícula. Existen dos formas para hacerlo:

  • Permitir la edición sobre el terreno. Éste es el modo más sencillo de implementar la edición. Mediante el Generador de propiedades, se incluye una columna especial en la cuadrícula, conocida como columna Editar, Actualizar, Cancelar. En tiempo de ejecución, cada fila de la columna contiene un botón con la etiqueta "Editar". Cuando un usuario hace clic en este botón de edición, el control actualiza automáticamente la presentación de la fila actual con controles TextBox para todas las columnas. La columna con el botón de edición se muestra con botones Actualizar y Cancelar. Agregue código a los eventos UpdateCommand y CancelCommand para propagar los cambios de los controles de edición en el origen de datos.

    Para obtener información detallada, vea Permitir a los usuarios editar elementos en un control DataGrid de servidor Web.

  • Crear un diseño de edición personalizado con una columna plantilla. Puede crear columnas que muestren los datos en controles de edición. Este enfoque permite elegir qué columnas se puede editar y el modo en que el usuario podrá editar los datos. Por ejemplo, en lugar de utilizar un control TextBox para los datos verdadero o falso, podría preferir un control ListBox con las entradas "Verdadero" y "Falso". Una columna plantilla permite insertar más de un control en una celda de control DataGrid.

    La columna plantilla admite cuatro plantillas:

    • HeaderTemplate
    • ItemTemplate
    • EditItemTemplate
    • FooterTemplate

    Para obtener más información, vea Permitir a los usuarios editar elementos en un control DataGrid de servidor Web y Permitir a los usuarios eliminar elementos en un control DataGrid de servidor Web.

Ordenar

El control de servidor Web DataGrid proporciona un medio para ordenar la cuadrícula. La cuadrícula no admite directamente la acción de ordenar, es decir, no ordena automáticamente su contenido. En su lugar, proporciona un medio para agregar opciones de orden a la cuadrícula, como por ejemplo hipervínculos en los encabezados de columna, en los que los usuarios pueden hacer clic para ordenar. A continuación, la cuadrícula le notificará que un usuario solicitó la ordenación. Deberá ordenar entonces el origen de datos y enlazarlo de nuevo al control DataGrid.

El control DataGrid proporciona dos niveles de compatibilidad para ordenar:

  • Ordenación predeterminada   Se especifica que se desea que la cuadrícula admita la ordenación. Todos los encabezados de columna son botones de vínculo; cuando el usuario haga clic en uno, usted recibirá una notificación de la ordenación. Esta solución es sencilla, pero no permite seleccionar qué columnas admiten la ordenación: todas lo hacen.
  • Ordenación personalizada   Se definen las columnas que admiten la ordenación. Ésta es una opción más compleja, porque se debe definir las columnas, ya sea mediante columnas enlazadas o columnas plantilla. Sin embargo, esto no sólo permite especificar qué columnas pueden ordenarse, sino también utilizar cualquier control que se desee en el encabezado de columna como botón para ordenar. Por ejemplo, podría utilizar un gráfico de creación propia por medio de un control de servidor Web ImageButton.

Para obtener información detallada, vea Agregar ordenación a un control DataGrid de servidor Web.

Vea también

DataGrid (Control de servidor Web) | Agregar controles DataGrid de servidor Web a una página de formularios Web Forms | DataGrid (Clase)