Pecan Consulting

  • Home
  • ¿Quiénes Somos?
    • Trabajos Anteriores
  • Servicios
  • Blog
  • Contacto
Esta usted aqui: Inicio / .net / Tutorial aplicar estilo a gridView asp.net con css

Tutorial aplicar estilo a gridView asp.net con css

12 febrero, 2014 By DavidMS 9 Comments

Hola, muy buenas.

Para este primer «post-tutorial» vamos a aplicar estilo a GridView asp.net con css.

Un GridView es un control de usuario que nos va a generar una tabla html a partir de información obtenida de una base de datos. Nos ofrece la posibilidad de paginar los resultados automáticamente así como utilizar distintos campos para la ordenación de los resultados.

Este es un ejemplo de GridView; nos interesa un GridView sin ningún tipo de estilo, con paginación y con ordenación.

Y este es el html que se genera…

<div>
<table id="gvEquipos" style="border-collapse: collapse;" border="1" rules="all" cellspacing="0">
<tbody>
<tr>
<th scope="col"><a>Club</a></th>
<th scope="col"><a>Nombre</a></th>
<th scope="col"><a>Fundacion</a></th>
<th scope="col"><a>Presupuesto</a></th>
<th scope="col"><a>Presidente</a></th>
<th scope="col"><a>Direccion</a></th>
<th scope="col"><a>PaginaWeb</a></th>
</tr>
<tr>
<td>Real Madrid</td>
<td>Real Madrid Club de Fútbol</td>
<td>1902</td>
<td>346000000</td>
<td>Ramón Calderón</td>
<td>Concha Espina, 1 28036 Madrid</td>
<td>http://www.realmadrid.com</td>
</tr>
<tr>
<td>Barcelona</td>
<td>Fútbol Club Barcelona</td>
<td>1899</td>
<td>280000000</td>
<td>Joan Laporta</td>
<td>Avda. Arístides Maillol s/n 08028 Barcelona</td>
<td>http://www.fcbarcelona.com</td>
</tr>
<tr>
<td>Athletic</td>
<td>Athletic Club de Bilbao</td>
<td>1898</td>
<td>41106000</td>
<td>Ana Urkijo Elorriaga</td>
<td>Alameda de Mazarredo, 23 48009 Bilbao</td>
<td>http://www.athletic-club.es</td>
</tr>
<tr>
<td>Celta</td>
<td>Real Club Celta de Vigo, SAD</td>
<td>1923</td>
<td>24000000</td>
<td>Carlos Mouriño</td>
<td>Avda. de Balaídos, s/n 36210 Vigo</td>
<td>http://www.celtavigo.net</td>
</tr>
<tr>
<td>Deportivo</td>
<td>Real Club Deportivo de la Coruña</td>
<td>1906</td>
<td>77000000</td>
<td>Augusto César Lendoiro</td>
<td>Plaza Pontevedra 19, 1º 15003 La Coruña</td>
<td>http://www.canaldeportivo.com</td>
</tr>
<tr>
<td>Espanyol</td>
<td>Real Club Deportivo Espanyol de Barcelona</td>
<td>1900</td>
<td>38360000</td>
<td>Daniel Sánchez LLibre</td>
<td>Paseo Olímpico, 17-19, 08038 Barcelona</td>
<td>http://www.rcdespanyol.com</td>
</tr>
<tr>
<td>Mallorca</td>
<td>Real Club Deportivo Mallorca, SAD</td>
<td>1916</td>
<td>30000000</td>
<td>Mateo Alemany</td>
<td>Son Moix. Camí dels Reis, s/n 07011 Palma de Mallo</td>
<td>http://www.rcdmallorca.es</td>
</tr>
<tr>
<td>Osasuna</td>
<td>Club Atlético Osasuna</td>
<td>1920</td>
<td>20000000</td>
<td>F. J. Izco</td>
<td>Estadio de El Sadar, c/ de El Sadar s/n 31006 Pamp</td>
<td>http://www.osasuna.es</td>
</tr>
<tr>
<td>Racing</td>
<td>Real Racing Club Santander, SAD</td>
<td>1913</td>
<td>27000000</td>
<td>Manuel Huerta Castillo</td>
<td>Calle Real Racing Club, s/n 39005 Santander</td>
<td>http://www.realracingclub.es</td>
</tr>
<tr>
<td>R. Sociedad</td>
<td>Real Sociedad, SAD</td>
<td>1909</td>
<td>37150943</td>
<td>Miguel Fuentes</td>
<td>Paseo de Anoeta, 1 20014 San Sebastián</td>
<td>http://www.realsociedad.com</td>
</tr>
<tr>
<td colspan="7">
<table>
<tbody>
<tr>
<td>1</td>
<td><a>2</a></td>
<td><a>3</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>

Con esto obtenemos esta tabla…

GridViewSinFormato

Analizando un poco la estructura de esta tabla vemos que crea una tabla con un header y, en el caso de que hayamos solicitado paginación, otra tabla en la última fila en la que mete los enlaces de paginación. Vamos con el estilo…

En primer lugar, vamos a crear tres clases para dar estilo a la tabla, una para dar estilo al header (gridViewHeader), otra a la paginación (gridViewPaginacion) y otra para el contenido (gridView).

Vamos ahora a escribir los estilos. En primer lugar el estilo para la clase gridView

/*Estilo general para el gridView*/
.gridView {
margin:0 auto;
font-size:11px;
text-align:center;
border:hidden;
}
/*Selecciona las filas pares y las colorea*/
.gridView tr:nth-child(even)
{
background-color: #a9c673;
}
/*Selecciona las filas impares y las colorea*/
.gridView tr:nth-child(odd)
{
background-color: #fff;
}
/*Estilo para las casillas del gridView*/
.gridView td {
padding-left:3px;
padding-right:3px;
border:hidden;
}

Con este código coloreamos las filas, damos un tamaño de letra, centramos la tabla y quitamos los bordes. El resultado…

GridViewConFormato01

Vamos ahora con el estilo para la paginación.


/*Color de fondo para la paginación*/

.gridViewPaginacion td {
background-color:#435B14;
}

/*Bordes redondeados para la paginacion*/

.gridViewPaginacion > td{
border-radius:0px 0px 5px 5px;
}

/*Centramos la tabla que contiene los enlaces para las paginas*/

.gridViewPaginacion table {
margin:2px auto;
}

/*El span representa el enlace a la pagina en la que estamos actualmente*/

.gridViewPaginacion span {
display:block;
margin:0;
padding:5px;
width:18px;
height:18px;
border-radius:50% 50%;
background:#B1C689;
color:#3743a1;
}

/*Estilo para los enlaces redondos*/

.gridViewPaginacion a {
display:block;
text-decoration:none;
margin:0;
padding:5px;
width:15px;
height:15px;
border-radius:50% 50%;
background:#367DEE;
color:#fff;
}

.gridViewPaginacion a:hover {
display:block;
margin:0;
padding:5px;
width:18px;
height:18px;
border-radius:50% 50%;
background:#B1C689;
color:#3743a1;
box-shadow: 0 0 .5em rgba(0, 0, 0, .8);

}

Y el resultado…

GridViewConFormato02

Por ultimo vamos a dar formato a el header.


.gridViewHeader{
height:35px;
}

.gridViewHeader th {
background-color:#435B14;
padding:5px;
border:hidden;
color:#fff;
}

/*Redondeamos el borde superior izquierdo de la primera casilla del header*/

.gridViewHeader th:first-child {
border-radius:5px 0 0 0;
}

/*Y el borde superior derecho de la ultima casilla*/

.gridViewHeader th:last-child {
border-radius:0 5px 0 0;
}

/*Estilo para los enlaces del header...*/

.gridViewHeader th a {
padding:5px;
text-decoration:none;
color:#435B14;
background-color:#a9c673;
border-radius:5px;

}

.gridViewHeader th a:hover {
color:#435B14;
background-color:#B1C689;
box-shadow:0 0 .9em rgba(0, 0, 0, .8);
}

Y con esto hemos terminado. Este es el resultado final.

GridViewConFormatoFinal

Más que buscar un estilo con un diseño bonito, he intentado analizar la estructura que se genera a partir de un GridView y ver cómo acceder a cada una de las partes de la tabla.

Normalmente es muy útil ocultar cierta información dentro de un GridView que no se muestra pero es muy útil para uso interno de la aplicación. En un post futuro veremos cómo tratar con esos campos ocultos para que no nos den ningún problema con el estilo.

Espero que os haya gustado y agradeceré todos los comentarios que tengais al respecto. Yo soy un aficionado que está empezando y estoy deseando recibir consejos y sugerencias.

Un saludo y hasta la próxima.

Compártelo:

  • Haz clic para enviar por correo electrónico a un amigo (Se abre en una ventana nueva)
  • Haz clic para compartir en Facebook (Se abre en una ventana nueva)
  • Haz clic para compartir en Twitter (Se abre en una ventana nueva)
  • Haz clic para compartir en Google+ (Se abre en una ventana nueva)
  • Haz clic para compartir en LinkedIn (Se abre en una ventana nueva)
  • Haz clic para compartir en Pocket (Se abre en una ventana nueva)
  • Haz clic para compartir en Pinterest (Se abre en una ventana nueva)
  • Haz clic para compartir en Tumblr (Se abre en una ventana nueva)

Filed Under: .net, asp.net, css, diseño web, news, programacion, tutoriales

Date una vuelta por nuestro Blog

  • enero 2015 (1)
  • diciembre 2014 (12)
  • noviembre 2014 (1)
  • octubre 2014 (1)
  • julio 2014 (3)
  • febrero 2014 (1)

Comments

  1. Juan Luis says

    14 noviembre, 2014 at 9:22 am

    Muy bueno David. Tremenda utilidad !!!

    Responder
  2. pilarbcn says

    24 septiembre, 2014 at 4:42 pm

    Genial!!! Está muy bien explicado y de gran utilidad.
    Gracias

    Responder
  3. Jorge Arana says

    3 agosto, 2014 at 6:21 am

    Hola, es interesante lo que has mostrado, sin embargo soy nuevo en css y no entiendo como darle 3 clases a una misma etiqueta. En otras palabras si hago algo así <asp:GridView ID="GridView1" runat="server" CssClass="gridViewPaginacion" ¿Cómo agrego luego la clase para el header y GridView?

    Responder
    • davidmartinezsepulveda says

      4 agosto, 2014 at 9:46 am

      No se si he entendido bien lo que quieres hacer, pero para añadir varias clases a la misma etiqueta sólo tienes que ponerlas separadas por un espacio…
      p. Ej: CssClass = «gridViewPaginacion otraClase otraClaseMas»

      Espero haberte ayudado.
      Un saludo.

      Responder
      • Jorge Arana says

        6 agosto, 2014 at 12:56 am

        Si gracias, ya lo entendi. No había prestado atención a la parte que colocaste :

        Ahí está la respuesta a lo que pregunté.

        Responder
  4. Cesar says

    16 julio, 2014 at 3:53 pm

    Te felicito, a veces como desarrolladores estamos peleados con los diseños o estilo visual de los objetos y con ejemplos como este a parte de mostrar como se asignan propiedades y estilos en definitiva ver que se pueden hacer grid como el de tu ejemplo es una chulada..

    Responder
    • davidmartinezsepulveda says

      16 julio, 2014 at 6:09 pm

      Muchas gracias Cesar.

      Responder
  5. Michael Rivas says

    9 julio, 2014 at 5:30 pm

    Que bueno post! me ayudaste muchisimo!! Gracias

    Responder
    • davidmartinezsepulveda says

      11 julio, 2014 at 11:26 am

      Muchas gracias a ti por comentar!!! Un saludo

      Responder

Deja un comentario Cancelar respuesta

¿Tienes alguna pregunta? No dudes en ponerte en contacto con nosotros.

Su nombre (requerido)

Su e-mail (requerido)

Asunto

Su mensaje

Contacto

  • Pecan Soluciones Informaticas
  • C/ La Gaviota, 6
    28022 Madrid
  • 660 811 495
  • info@pecan.es
Facebook

Pecan Consulting

Somos una consultoría informática especializada en el desarrollo web, las aplicaciones móviles y el márketing online. En Pecan buscamos la satisfacción de nuestros clientes. Para ello proporcionamos un trato cercano desde las primeras fases de desarrollo, garantizando una perfecta toma de requisitos que nos permite aportar soluciones informáticas apropiadas a las necesidades de cada proyecto.

Categorías

.net asp.net css diseño web Java Microsoft news plugins woocommerce plugins wordpress programacion RMI servicios Sistemas Distribuidos trabajos tutoriales UNED woocommerce wordpress
PMP Certificate Scrum Manager Member PMP Certificate
  • Home
  • ¿Quiénes Somos?
  • Servicios
  • Blog
  • Contacto

Copyright © 2022· PECAN CONSULTING

loading Cancelar
La entrada no fue enviada. ¡Comprueba tus direcciones de correo electrónico!
Error en la comprobación de email. Por favor, vuelve a intentarlo
Lo sentimos, tu blog no puede compartir entradas por correo electrónico.