Menu

Seleccionar una fila haciendo clic en ella

febrero 8, 2011 - ASP.NET

Introducción

Desplegar información en pantalla es muy habitual en las páginas web, y más aún mostrar esta información en grillas. Controles como el GridView nos ayudan a mostrar la información de manera eficiente, pero hay veces que se queda corta en la cantidad de información a mostrar, especialmente cuando tenemos una estructura tipo Maestro/Detalle, para la cual por lo regular al tener la información en la grilla debemos dar clic a una fila para ver los detalles de este, esta acción por lo regular se hace a través de botones, inclusive hay una funcionalidad especial para esto llamada SelectCommand, pero a veces no queremos que este comportamiento se limite a un botón de selección, que tal si dar la habilidad de seleccionar a toda la fila?, en este articulo les mostrare como seleccionar un registro de un GridView haciendo clic en la fila.

Resultado

Al finalizar el articulo el resultado que vamos a obtener es el mostrado en la imagen de abajo, cabe a notar que el error que aparece es por que al hacer clic en en la fila ésta no tiene asociado un pagina a la cual responder.

SelectRowClickinOnIt

Requerimientos

En el ejemplo realizado utilicé:

La teoria

La idea detras del ejemplo es adicionar dinamicamente las propiedades de las filas que se van agregando modificando sus atributos de estilo y con un poco de CSS y javascript tenemos el resultado deseado.

El método Render

Para poder aplicar dinámicamente propiedades a cada fila que se crea en el GridView utilizamos este método que permite realizar una rutina personalizada en el momento de enlazar los datos, así tenemos control con sobre cada registro que va agregando y sus propiedades.

Colocando los atributos

Como habíamos comentado anteriormente usamos el evento RowDataBound, dentro de este procederemos a agregar las propiedaes que nos permitiran:

  1. Utilizar el método OnMouseOver que nos permite darle estilo a la fila cuando el puntero pasa por encima de ella.
  2. Utilizar el método OnMouseOut que nos permite darle estilo a la fila cuando el puntero ‘sale’ de la fila, es el inverso al OnMouseOver.
  3. Por último colocamos en el atrobuto OnClick el evento asociado a la seleccion de la fila.

Usando ClientScript.GetPostBackClientHyperlink

Para lograr el acometido de clonar la acción de un SelectCommandField en un GridView debemos hacer manualmente el PostBack que se ejecuta cuando usamos el SelectCommandField, para esto usamos esta clase que hace exactamente lo mismo que el evento __doPostBack, con la diferencia que este por ser ejecutado del lado del servidor tiene acceso a los controles de servidor, mientras que el evento __doPostback es javascript puro.

El código

Modificando los atributos

Lo primero que hacemos es preguntar en el evento RowDataBound si estamos tratando con una fila de datos (No queremos ponerle esta funcionalidad a los titulos no?), luego de esto procedemos a cambiar los atributos.

protected override void Render(System.Web.UI.HtmlTextWriter writer)
{
  foreach (GridViewRow row in grdClientes.Rows)
  {
    if (row.RowType == DataControlRowType.DataRow)
    {
      row.Attributes["onmouseover"] = "this.style.background = '#eeff00'; this.style.cursor = 'pointer'";
      row.Attributes["onmouseout"] = "this.style.background='#ffffff'";
      row.Attributes["onclick"] = ClientScript.GetPostBackClientHyperlink(grdClientes, "Select$" + row.DataItemIndex, true);
    }
  }
  base.Render(writer);
}

Como podemos ver usando un poco de CSS básico modificamos los atributos de BackGround y Cursor. por otro lado el método GetPostBackClientHyperLink le enviamos: el objeto que estamos modificando y el evento relacionado a la seleccion de la fila como si de un SelectCommandField se tratase.

Juntando todo

Para poder ver el código completo y el proyecto en funcionamiento puedes revisarlo en GitHub.

Conclusiones

A simple vista el código parece extraterrestre y complejo, sin embargo una vez que lo hayamos probado y ejecutado al ver el código fuente de la página nos damos cuenta que no es tan complicado como parece.

Happy Coding!

14 pensamientos sobre “Seleccionar una fila haciendo clic en ella

Jorge Barrera

Esta bueno ni que lo hibiera hecho yo, jejejeje

Respuesta
susana

Me encanto, justo estaba buscndo eesto para un proycto final, ya que al usuario final le da flojera buscar el link de seleccionar…. y asi es mas comodo para ellos y evitas errores….

Sabes como le puedo hacer para ocultar la columna de Select, pero me funcione de la misma forma como lo hiciste tu.

Gracias

Respuesta
Eduardo

Hola susana, gracias por comentar.
Para ‘eliminar’ la fila que el usuario ha seleccionado puedes hacerlo mediante jQuery, utilizando el método remove o bien manipulando el evento propio en .NET (para esto puedes colocar el DataSource en cache)

Respuesta
Jesus

hola, una pregunta, si ya tengo seleccionada la fila , como puedo hacer para que haga una accion cuando se seleccione, por ejemplo que te mande a otra pagina

Respuesta
Christian

Muy buen tutorial, mi pregunta ahora es ¿Como obtengo el texto que se encuentra dentro la celda en la que di click? y luego enviar ese texto a un label cualquiera.
Gracias de antemano

Respuesta
Proco

Hola Christian gracias por comentar, puedes seleccionarlo cambiando la propiedad que devuelves de la fila, es decir en vez de e.Row.RowIndex buscas el control dentro de la fila con: e.Row.Cells[columna].Controls[0], esto te devuelve el control que está dentro de la celda y de ahí puede obtener el texto.

Respuesta
Esteban

Hola, buen tema me sirve para lo que busco, pero tengo una duda, al igual que Jesús, necesito que al hacer click sobre una fila se realice una acción determinada, específicamente mostrar otra ventana que tiene un formulario con los datos del registro de la fila seleccionada ¿Cómo le asigno esta acción a este procedimiento?

Saludos.

Respuesta
Proco

Hola Esteban, gracias por comentar y perdón por la demora, si quieres asignar otra acción al seleccionar la fila puedes reemplazar la línea de asignación del método de selección, por el que desees:

Esto:
e.Row.Attributes[“onclick”] = ClientScript.GetPostBackClientHyperlink(this.GridView1, “Select$” + e.Row.RowIndex);

Por algo como esto:
e.Row.Attributes[“onclick”] = string.Format(“MiMetodo({0})”, + e.Row.RowIndex));

De esta forma al hacer clic en la fila se ejecutará el método de JS MiMetodo y le estarías pasando como parámetro el RowIndex, espero que te sea de ayuda!

Respuesta
Jaendora

Buen tutorial me ha servido muchisimo… pero no me a funcionado la respuesta que le distes a Christian, me podrias ayudar con un ejemplo por favor…..

Respuesta
Proco

Hola Jaendora gracias por comentar, he actualizado el post para que puedas ver mejor el código ademas de realizar cambios y proporcionar el link para el proyecto en GitHub: https://github.com/EduardoOrtegaME/SelectRowClickinOnIt

Respuesta
Jaendora

Proco gracias por su ayuda, estoy tratando de ingresar a la direccion que dijo https://github.com/EduardoOrtegaME/SelectRowClickinOnIt , pero no me da acceso…..

Respuesta
Proco

La url funciona correctamente, debes ingresar y dar clic en Download Zip y listo…

Respuesta
cesar leal

aqui les dejo algo complementado con del compañero del post que les podria servir.

asi podran seleccionar los datos de cada fila.

protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
{

Label1.Text = this.GridView1.Rows[GridView1.SelectedIndex].Cells[1].Text;
Label2.Text = this.GridView1.Rows[GridView1.SelectedIndex].Cells[2].Text;
Label3.Text = this.GridView1.Rows[GridView1.SelectedIndex].Cells[3].Text;
Label4.Text = this.GridView1.Rows[GridView1.SelectedIndex].Cells[4].Text;

}

y puedes enviar los datos a otra pagina con una variable de session.
asi

Session[“name”]= label.text;

server.tranfers(“url”);

y la reciben en la otra pagina asi:

string recibo = (string) session[“name”].Tostring();

espero tambien les sirva.

Respuesta
Proco

Muchas gracias por tu valioso aporte.

Respuesta

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *