Cómo: Habilitar la selección predeterminada en el control de servidor Web GridView

  • Artículo

Actualización: noviembre 2007

El control GridView de ASP.NET tiene una función de selección integrada que permite a los usuarios seleccionar una fila en la cuadrícula. Al seleccionar una fila en un control GridView, no se realiza intrínsecamente ninguna tarea. Sin embargo, agregando la función de selección, puede agregar la funcionalidad a la cuadrícula que depende de que los usuarios señalen a una fila concreta. Entre los casos típicos en los que se agrega funcionalidad de selección al control GridView se encuentran los siguientes:

  • Cuando los usuarios seleccionan una fila, la fila se vuelve a mostrar con una apariencia diferente.

  • Cuando los usuarios seleccionan una fila, los datos relacionados se muestran en otra parte de la página, por ejemplo, en un control DetailsView.

Para tener acceso a la fila seleccionada, utilice la propiedad SelectedRow.

Para hacer las acciones personalizadas cuando un usuario selecciona una fila, proporcione un controlador para el evento SelectedIndexChanging.

Procedimientos

Para habilitar la selección mediante la etiqueta inteligente

  1. En la vista Diseño, haga clic con el botón secundario en el control GridView y, a continuación, haga clic en Mostrar etiqueta inteligente.

  2. En el panel de etiquetas inteligentes, seleccione Habilitar selección.

Para habilitar la selección predeterminada mediante la propiedad AutoGenerateSelectButton

  • Seleccione el control GridView y en la ventana Propiedades, establezca AutoGenerateSelectButton en true.

    O bien

  • En la vista Código fuente, en el elemento <asp:GridView>, establezca el atributo AutoGenerateSelecttButton en true:

    <asp:GridView Runat="server" ID="GridView1" 
  AutoGenerateSelectButton="true" />

Para personalizar la apariencia de una fila en el modo de selección

  • Establezca las propiedades para SelectedRowStyle.

    Por ejemplo, si establece la subpropiedad BackColor de SelectedRowStyle en gris, la fila seleccionada se muestra con un fondo gris.

Para personalizar el texto de comando del botón Seleccionar

  1. En la vista Diseño, haga clic con el botón secundario en el control GridView y, a continuación, haga clic en Mostrar etiqueta inteligente.

  2. Haga clic en Editar columnas.

    Se muestra el cuadro de diálogo Campos.

  3. En Campos seleccionados, haga clic en Seleccionar.

    Las propiedades de los campos se cargan en la cuadrícula de propiedades.

  4. En las propiedades CommandField, escriba el texto para el botón Seleccionar en la propiedad SelectText.

Para cambiar el texto de comando del botón Seleccionar a una imagen

  1. En la vista Diseño, haga clic con el botón secundario en el control GridView y, a continuación, haga clic en Mostrar etiqueta inteligente.

  2. Haga clic en Editar columnas.

    Se muestra el cuadro de diálogo Campos.

  3. En Campos seleccionados, haga clic en Seleccionar.

    Las propiedades de los campos se cargan en la cuadrícula de propiedades.

  4. En propiedades CommandField, escriba o seleccione la dirección URL de la imagen que va a utilizar para el botón Seleccionar en el campo SelectImageUrl.

  5. En propiedades CommandField, seleccione Imagen en el campo ButtonType.

  6. Haga clic en Aceptar.

Para mostrar la fila seleccionada en un control DetailsView

  1. Copie el control de origen de datos que se enlaza al control GridView y pegue una copia del control de origen de datos en la página.

  2. En la vista Diseño, haga clic con el botón secundario en el control de origen de datos y, a continuación, haga clic en Mostrar etiqueta inteligente.

  3. Haga clic en Configurar origen de datos.

  4. Compruebe que el campo ¿Qué conexión de datos debería utilizar la aplicación para conectarse a la base de datos? esté establecido en la misma conexión que el control GridView.

  5. Haga clic en Siguiente.

  6. Seleccione la opción Especificar columnas de una tabla o vista.

  7. En la lista desplegable Nombre, compruebe que está seleccionada la misma tabla que se enlaza al control GridView.

  8. En Columnas, seleccione las columnas de la tabla que se mostrarán en el control DetailsView.

  9. Haga clic en el botón WHERE.

    Aparecerá la ventana Agregar cláusula WHERE.

  10. En la lista desplegable Columna, seleccione el nombre de columna que se utilizará en la cláusula WHERE. Esta columna debería ser una clave principal para la tabla o contener solamente los valores únicos para identificar la fila seleccionada.

  11. En la lista desplegable Origen, seleccione Control.

  12. En la lista desplegable Id. de control, seleccione el ID del control GridView.

  13. Haga clic en Add.

  14. Haga clic en Aceptar, después en Siguiente y, por último, en Finalizar.

  15. Haga clic con el botón secundario del mouse en el control DetailsView y, a continuación, haga clic en Mostrar etiqueta inteligente.

  16. En la lista desplegable Elegir origen de datos, seleccione el control de origen de datos que acaba de configurar.

Vea también

Conceptos

Modificar los datos de un control GridView de servidor Web

Referencia

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