[ASP.NET] Resaltando las filas y celdas de un GridView con jQuery

Posted on


Hola a todos, uno de los controles más utilizados es el GridView, con este control podemos hacer muchísimas cosas bastantes interesantes, pero su problema es que todo es del lado del servidor, sin embargo utilizando un lenguaje cliente como jQuery le podemos ir añadiendo funcionalidades como lo es el resaltar las filas y las columnas cuando se mueva el mouse sobre el GridView.

La idea es obtener algo como:

Imagen1

Como se puede apreciar en la imagen, la fila en donde ubico el mouse tiene un color amarillo claro, pero la celda en la que estoy parado tiene un amarillo mas fuerte, así el usuario sabrá exactamente donde tiene el cursor.

Ahora vamos a iniciar a desarrollar el ejemplo, el código de carga de datos del Grid no es relevante, pero en el ejemplo que dejo lo podrán revisar.

1. Creamos un skin para darle un estilo al Grid:

   1:  <asp:GridView runat="server" SkinID="Professional" Font-Name="Verdana" 
   2:      HeaderStyle-Height="35px" ItemStyle-Height="35px" Font-Size="10pt" 
   3:      Cellpadding="4" HeaderStyle-BackColor="#444444" HeaderStyle-ForeColor="White" 
   4:  />

2. Creamos el HTML del GridView:

   1:  <div>
   2:      <h1>ASP.NET GridView y jQuery | Resaltando filas y celdas</h1>
   3:      <hr />
   4:      <asp:GridView ID="grvDatos" runat="server" SkinID="Professional"></asp:GridView>
   5:  </div>

3. Creamos una hoja de estilo para tener allí las clases css a utilizar:

   1:  .highlight
   2:  {
   3:      background-color:#F7F5CB;
   4:  }
   5:  .highlight-td
   6:  {
   7:      background-color:#E5DE78;
   8:  }
   9:  td
  10:  {
  11:      cursor:pointer;
  12:  }

4. Referenciamos la hoja de estilos y la librería jQuery:

   1:  <link href="Estilo.css" rel="stylesheet" type="text/css" />
   2:  <script src="scripts/jquery-1.6.2.min.js" type="text/javascript"></script>

5. Escribimos el “complicadísimo” código jQuery:

   1:  <script type="text/javascript">
   2:      $(function () {
   3:          $("#<%= grvDatos.ClientID %> tr").hover(
   4:              function () {
   5:                  $(this).addClass('highlight');
   6:              },
   7:              function () {
   8:                  $(this).removeClass('highlight');
   9:              }
  10:          )
  11:          $("#<%= grvDatos.ClientID %> td").hover(
  12:              function () {
  13:                  $(this).removeClass('highlight');
  14:                  $(this).addClass('highlight-td');
  15:              },
  16:              function () {
  17:                     $(this).removeClass('highlight-td');
  18:              }
  19:          )
  20:      })
  21:  </script>

Y ahora como funciona el código:

Simplemente con el selector $("#<%= grvDatos.ClientID %> tr") le decimos que tome los tr de nuestro Grid, como recordaran al renderizar el Grid realmente obtenemos una tabla, luego con la función hover en primera medida le debemos especificar una función que maneje el evento cuando el mouse esta sobre el elemento, allí lo que hacemos es agregar la clase highlight al tr, y en la segunda función que maneja el evento cuando el mouse sale lo que se hace es remover la clase añadida. Para el td funciona de la misma manera, solo que en ese caso agregamos es la clase highlight-td.

Espero les haya gustado, les dejo el código del ejemplo:

Descarga el ejemplo (se llama jQuery_GridView_Resaltado!

4 comentarios sobre “[ASP.NET] Resaltando las filas y celdas de un GridView con jQuery

    rotormania escribió:
    08/28/2012 en 13:10

    Muy bUen ejempl gracias.

    Janet escribió:
    12/29/2012 en 12:59

    Y como haces para obtener el id del elemento que obtienes con esos selectores, se que las celdas no tienen un id, pero si introduces labels en el gridview éstos si tienen id, pero no te deja obtenerlos con .attr(“id”), gracias

      Julio Avellaneda respondido:
      12/30/2012 en 11:12

      hola, el tema es q los id no serán fijos, por lo que podrías es definir clases css y referenciar el elemento por la clase que necesites, cualquier cosa me cuentas.

      Saludos.

        Janet escribió:
        01/01/2013 en 23:49

        sip, defini la propiedad de ClientIdMode en c# para poder hacerles referencia más fácil, y el problema del attr era por que debía poner comillas simples en vez de dobles, gracias por tener la atención de contestar, de hecho creo que mi problema se resolvería mejor usando JSON ya lo estoy investigando. Saludos

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s