Menu

Seleccionar CheckBox en un GridView haciendo clic en la fila

Enero 8, 2011 - jQuery

Cuando estamos trabajardo con gridViews regularmenete tenemos algun boton o enlace para seleccionarlo, en el case de permitir seleccion múltiple por lo regular colocamos algún TemplateField con un CheckBox para que el usuario seleccione las filas con las que desea trabajar, sin embargo para seleccionar dichas filas debe hacer clic en el CheckBox (Suena lógico no?), pero hagamosle la vida aún más fácil, es mejor que la fila se seleccionara haciendo clic en ella o en el CheckBox, y si le mostramos visualmente que filas tiene seleccionada? nuestra interfaz brindaria muchisimas más facilidad y entendimiento. Quedando así:

Requisitos

Este ejemplo lo realice con:

El CSS

Para lograr el efecto de destacar la fila al pasar el raton por el mouse se debe aplicar la propiedad hover al elemento tr, así:

tr:hover
{
background-color: #969E4B;
}
<pre>.HighLightedRow
{
background-color:#969E4B;
}</pre>

JQuery

Como era de esperarse el código para lograr nuestro cometido es en JQuery, aca esta el código y ya lo veremos paso por paso:

$(document).ready(function () {
$('#MainContent_GridView1 tr').click(function (event) {
//Coloca o quita la clase selected
$(this).toggleClass('HighLightedRow');
if (event.target.type !== 'checkbox') {
//Chequea o deschequea el checkbox
$(':checkbox', this).attr('checked', function () {
return !this.checked;
});
}
});
});

Comencemos entonces a desglosar el código:

$(document).ready(function () {

Esto creo que no necesita explicación.

$('#MainContent_GridView1 tr').click(function (event) {

Aca estamos definiendo un evento al hacer click sobre el elemento tr de la Grilla MainContent_GridView1.

$(this).toggleClass('HighLightedRow');

Usamos la funcion toggleClass que se encarga de colocar o quitar la clase dependiendo de si el valor esta puesto o no.

if (event.target.type !== 'checkbox') {

Se ve complicado pero no lo es, lo que estamos validando aca es que el usuario realmente hizo clic en la fila y no en el CheckBox, ¿Por qué?, porque de lo contrario al hacer clic en el CheckBox este se dispararia dos veces, ya veremo porque.

$(':checkbox', this).attr('checked', function () {
return !this.checked;
});

Este es el código que se encarga de chequear o des chequear el CheckBox cuando hacemos clic en la fila (Devuelve el estado contrario al actual) y esta dentro de un if porque de lo contrario cuando hacemos clic en el CheckBox como tal, este código también se dispararía resultando en un doble clic lo cual no deseamos.

Conclusión

Con este ejemplo podemos ver como hacmos más fácil la vida al usuario hacindo que visualmente vea lo que esta haciendo y haciendo la aplicacion muchas mas compresible a simple vista. Hasta la próxima.

Happy coding!

5 pensamientos sobre “Seleccionar CheckBox en un GridView haciendo clic en la fila

Brian Vanegas

No me queda muy claro en la fila 5, porque el event.target.type !!

Respuesta
Brian Vanegas

Cambie el event.target.type por this y me funciona perfectamente, solo que no me deja checkear y descheckear el checkbox desde él mismo y solo de la fila.

Respuesta
Eduardo

Efectivamente Brian, la linea 5:
if (event.target.type !== ‘checkbox’) {

porque si hacemos clic en el propio CheckBox todo este código se dispararía nuevamente como si hicieramos doble clic en el checkbox, es posible que sea lo que te sucede, ten en cuenta las versiones de jQuery que usé en el ejemplo…

Respuesta
Julio

Amigo, me agradan tus publicaciones, pero lamentablemente no he podido descargar tus ejemplos, tienes alguna solución? Gracias

Respuesta
Proco

Hola Julio, gracias por comentar. Lamentablemente el código de este ejemplo lo he perdido, se avecinan cambios para el blog así que estate atento.

Respuesta

Deja un comentario

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