gridview

[ASP.NET] Controles enlazados a datos en ASP.NET 4.5

Posted on Actualizado enn

Hola a todos, hoy quiero mostrarles una nueva características que trae ASP.NET 4.5 y es la de realizar binding directamente desde la definición (HTML) del control, en mi opinión una característica bastante cool y que se asemeja a utilizar el patrón MVVM (claro una pequeña aproximación), los que ya han trabajado con WPF o Windows 8 ya les será tema conocido.

Entonces en primer lugar vamos a crear una clase Cliente, con 4 propiedades:

   1:  public class Cliente
   2:  {
   3:      public int ClienteId { get; set; }
   4:      public string Nombre { get; set; }
   5:      public string Apellido { get; set; }
   6:      public string Email { get; set; }
   7:  }

Ahora, para el ejemplos utilizaremos un GridView, y acá viene la primera propiedad nueva, en la definición del Grid vamos a utilizar ItemType, y allí definimos en esta caso la clase Cliente creada…y gracias al querido Visual Studio y su intellisense será muy sencillo:

image

Y ahora vamos para las columnas, en este caso para seguir aprovechando lo nuevo en ASP.NET 4.5 las vamos a definir utilizando TemplateField, y de nuevo tenemos la gran ayuda del intellisense:

image

Bueno y finalmente para el enlace a datos vamos a usar la propiedad SelectMethod, allí debemos colocar el nombre de un método que se encuentre en el code behind de la página, ese método debe ser público, entonces el HTML de GridView finalmente sería:

   1:  <asp:GridView ID="grvClientes" runat="server" AutoGenerateColumns="false" 
   2:      ItemType="Controles_Tipados.model.Cliente" SelectMethod="ObtenerClientes">
   3:      <Columns>
   4:          <asp:TemplateField HeaderText="Cliente Id">
   5:              <ItemTemplate><%# Item.ClienteId %></ItemTemplate>
   6:          </asp:TemplateField>
   7:          <asp:TemplateField HeaderText="Nombre">
   8:              <ItemTemplate><%# Item.Nombre %></ItemTemplate>
   9:          </asp:TemplateField>
  10:          <asp:TemplateField HeaderText="Apellido">
  11:              <ItemTemplate><%# Item.Apellido %></ItemTemplate>
  12:          </asp:TemplateField>
  13:          <asp:TemplateField HeaderText="Email">
  14:              <ItemTemplate><%# Item.Email %></ItemTemplate>
  15:          </asp:TemplateField>
  16:      </Columns>
  17:  </asp:GridView>

Y el code behind de la página:

   1:  private static readonly List<Cliente> clientes = new List<Cliente>(){
   2:      new Cliente { ClienteId = 1, Nombre = "Julio", Apellido = "Avellaneda", Email = "julito_gtu@hotmail.com" },
   3:      new Cliente { ClienteId = 1, Nombre = "Julio", Apellido = "Avellaneda", Email = "julito_gtu@hotmail.com" },
   4:      new Cliente { ClienteId = 1, Nombre = "Julio", Apellido = "Avellaneda", Email = "julito_gtu@hotmail.com" },
   5:      new Cliente { ClienteId = 1, Nombre = "Julio", Apellido = "Avellaneda", Email = "julito_gtu@hotmail.com" },
   6:      new Cliente { ClienteId = 1, Nombre = "Julio", Apellido = "Avellaneda", Email = "julito_gtu@hotmail.com" },
   7:      new Cliente { ClienteId = 1, Nombre = "Julio", Apellido = "Avellaneda", Email = "julito_gtu@hotmail.com" },
   8:      new Cliente { ClienteId = 1, Nombre = "Julio", Apellido = "Avellaneda", Email = "julito_gtu@hotmail.com" }
   9:  };
  10:   
  11:  public List<Cliente> ObtenerClientes()
  12:  {
  13:      return clientes;
  14:  }

En este caso tenemos una lista con datos fijos, pero si se quiere más dinamismo podríamos tener una consulta a base de datos.

Y para profundizar más en el tema: Strongly Typed Data Controls

Espero les haya gustado el post… saludos!

[jQuery] Graficando un GridView con jQuery

Posted on

Hola, uno de los controles que más me gusta utilizar es el GridView, y mostrar algunos datos en este control es bastante sencillo, pero al final siempre vamos a obtener una tabla, y en esos casos donde se debe marcar al diferencia se tiene  que ofrecer al usuario la posibilidad de ver más que un simple tabla con algunos estilos css.

Así que me decidí a realizar una gráfica de un GridView, algo que uno le muestre al usuario y diga “me encanta!"”, en el mercado existen muchos controles free y de pago para realizar gráficas, incluso para Visual Studio se ofrecen los Microsoft Chart Controls, sin embargo y como ya sabrán jQuery me encanta así que he decidido a utilizarlo.

Para graficar el GridView, vamos a hacer uso de un plugin bastante bueno que tiene muchas características y es Highcharts, además haremos uso de los CSS Friendly Controls Adapters para mejorar el renderizado del Grid.

Si no recuerdas como usar los CSS Friendly Controls DataAdapter revisa este post.

Entonces manos a la obra:

1. Creamos un GridView para mostrar los datos y un div, este div será el encargado de mostrar la gráfica y un LinkButton para que al darle click genere la gráfica:

   1:  <asp:GridView ID="grvDatos" runat="server" AutoGenerateColumns="true"     CSSSelectorClass="grid"></asp:GridView>
   2:  <asp:LinkButton ID="btnGraficar" runat="server" Text="Generar Gráfica"></asp:LinkButton>
   3:  <hr />
   4:  <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>

Para entender un poco la idea de la gráfica la idea es listar unos productos, y mostrar la cantidad vendida en enero y febrero, es decir:

Chart_1

2. Ahora, agregamos las referencias a los archivos js necesarios:

   1:  <script src="scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
   2:  <script src="scripts/highcharts.js" type="text/javascript"></script>
   3:  <script src="scripts/exporting.js" type="text/javascript"></script>

3. El código jQuery, lo voy a dividir en dos partes para que sea más claro. Parte 1:

   1:  $(function () {
   2:      $("#<% = btnGraficar.ClientID %>").click(function (e) {
   3:          Highcharts.visualize(table, options);
   4:          e.preventDefault();
   5:      });
   6:   
   7:      var table = $("#<% = grvDatos.ClientID %>  table")
   8:      options = {
   9:          chart: {
  10:              renderTo: 'container',
  11:              defaultSeriesType: 'column'
  12:          },
  13:          title: {
  14:              text: 'Datos extraidos de un GridView'
  15:          },
  16:          xAxis: {
  17:              title: {
  18:                  text: 'Productos'
  19:              }
  20:          },
  21:          yAxis: {
  22:              title: {
  23:                  text: 'Cantidad'
  24:              }
  25:          },
  26:          tooltip: {
  27:              formatter: function () {
  28:              return '<b>' + this.series.name + '</b><br/>' +
  29:              this.y + ' ' + this.x.toLowerCase();
  30:              }
  31:          }
  32:      };
  33:  });

Ahora vamos a explicar:

Línea 1: Se válida la carga de la página.

Línea 2 – 5: Creamos un manejador para el click del LinkButton, el cual llama a la función visualize, como parámetro se le envía el grid que se quiere graficar y unas opciones que ya veremos, al final decimos e.preventDefault() para evitar que e linkbutton haga postback.

Línea 7: En la variable tabla guardamos el selector que hace referencia al tabla generada por el GridView, recuerden que con los adaptadores primero se genera un div y luego si la tabla.

Línea 8 – 32: Definimos las opciones generales para el gráfico como el título del mismo, el subtitulo de los valores en x y en y, y la información que se quiere ver al colocar el mouse sobre cada barrita, como ven el nombre de las propiedades son muy explicitas.

4. Parte 2:

   1:  Highcharts.visualize = function (table, options) {
   2:      options.xAxis.categories = [];
   3:      options.yAxis.categories = [];
   4:   
   5:      options.series = [];
   6:      options.series[0] = {
   7:          name: 'Enero',
   8:          data: []
   9:      };
  10:      options.series[1] = {
  11:          name: 'Febrero',
  12:          data: []
  13:      };
  14:   
  15:      $('tbody tr', table).each(function (i) {
  17:          options.xAxis.categories.push($('td:eq(1)', this).text());
  18:          options.yAxis.categories.push($('td:eq(2)', this).text());
  19:          options.series[0].data.push(parseFloat($('td:eq(2)', this).text()));
  20:          options.series[1].data.push(parseFloat($('td:eq(3)', this).text()));
  21:      });
  22:   
  23:      var chart = new Highcharts.Chart(options);
  24:  }

Vamos a explicar:

Línea 1: Declaramos la función que se llama para generar la gráfica, recibe como parámetro la tabla que se desea graficar y las opciones de la gráfica.

Línea 2 y 3: Declaramos dos vectores para los valores en x y en y respectivamente.

Línea 5 – 13: Declaramos un vector que va a tener los datos de cada mes (Enero y Febrero).

Línea 15 – 21: Recorremos todas las filas del cuerpo de la tabla, y a cada vector le vamos asignando el valor correspondiente según la celda, para ello usamos eq(#) para decirle que tome el valor de una determinada celda.

Línea 23: Le decimos a la gráfica que tome as opciones de configuración que le fueron enviadas.

Y eso es todo, se creará una bonita gráfica como la siguiente:

Chart_2

La gráfica tiene las opciones de exportar e imprimir, esto se logra adicionando una referencia a la librería exporting.js

Espero les sea de mucha utilidad este ejemplo.

Descarga el ejemplo!

Filtrar GridView con un slider

Posted on

Cada vez se desea que el cliente tenga más herramientas y facilidades para realizar tareas en una aplicación, una de dichas tareas se encuentra cuando se tiene una tabla (en nuestro caso un gridview) el cual lista unos determinados productos, con una cantidad y un precio, bueno es un ejemplo algo sencillo pero será de utilidad para poder realizar el ejemplo.

Bien, lo que se desea tener es un slider que permita realizar un filtro de esa grilla y muestre solo los productos que cumplen con la condición especifica.

Para esta tarea vamos a hacer uso de jQuery y en especial de la librería jQuery UI la cual ofrece varios widgets bastantes buenos.

Ahora, tenemos un problema al utilizar el gridview, ya que su renderizado normal no es el mejor, así que vamos a hacer uso de los css friendly control adapters, los cuales ayudan a mejorar el renderizado del grid.

Y manos a la obra:

1. Referenciamos la librería core de jQuery, la librería de jQuery UI y las hojas de estilos a utilizar:

   1:  <script src="scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
   2:  <script src="scripts/jquery-ui-1.8.12.custom.min.js" type="text/javascript"></script>
   3:  <link href="styles/jquery-ui-1.8.12.custom.css" rel="stylesheet" type="text/css" />
   4:  <link href="styles/Grid.css" rel="stylesheet" type="text/css" />

2. Creamos el GridView (en el ejemplo encontrará como se realiza el cargue de datos), lo importante en este línea es que para asignar un estilo se usa el atributo CSSSelectorClass:

   1:  <asp:GridView ID="grvDatos" runat="server" AutoGenerateColumns="true" 
   2:      CSSSelectorClass="grid">
   3:  </asp:GridView> 

3. Definimos un div el cual será el slider:

   1:  <div id="slider"></div>

4. Definimos un label y una caja de texto para mostrar el valor actual del slider:

   1:  <p>
   2:      <label>Precio mínimo (Incremento 100):</label>
   3:      <input type="text" id="txtValor" style="border:0; color:#f6931f; font-weight:bold;" />
   4:  </p>

5. Y finalmente el código jQuery:

   1:  $(function () {
   2:      $("#slider").slider({
   3:          value:0,
   4:          min:0,
   5:          max:5000,
   6:          step: 200,
   7:          animate: true,
   8:          range: true,
   9:          slide: function (event, ui) {
  10:             $("#txtValor").val("$" + ui.value);
  11:             filterGrid(ui.value);
  12:          }
  13:      })
  14:      $("#txtValor").val("$" + $("#slider").slider("value"));
  15:  })
  16:  function filterGrid(valorMin) {
  17:      var min = valorMin;
  18:      var max = 5000;
  19:      $("#<% = grvDatos.ClientID %>  table tbody tr").each(function () {
  20:          var price = parseInt($(this).find('td:last').text());
  21:          if (price >= min && price <= max) {
  22:              $(this).fadeIn();
  23:          } 
  24:          else {
  25:              $(this).fadeOut();
  26:          }
  27:      });
  28:  }

Bueno vamos a revisar ese código:

En la línea 1 verificamos que el DOM este listo, luego de la línea 2 – 13 viene la declaración del widget de tipo slider, y las propiedades que le definimos son:

  • value: valor inicial
  • min: valor mínimo
  • max: valor máximo
  • step: valor del incremento
  • animated: si el slider será animado
  • range: indica si se mostrará un color de fondo sobre la parte del slider que ya ha sido seleccionada
  • slide: función que se ejecuta cada vez que se cambia el valor del slider, en este caso primero se asigna el valor seleccionado a la caja de texto y segundo se llama a la función que realizará el filtro.

Luego de la línea 16 – 28 es la función que realiza el filtro del grid, esta función recibe como parámetro el valor mínimo el cual para este ejemplo será el valor seleccionado en el slider, la línea 17 y 18 asignan el valor mínimo y máximo en dos variables, luego en la línea 19 le decimos por medio del selector que seleccione del div grvDatos la tabla, luego que de esa tabla seleccione el cuerpo de la tabla y finalmente las filas del cuerpo de la tabla, y por medio de la función each entonces vamos a recorrer todas las coincidencias encontradas.

En la línea 20 guardamos en una variable el valor de la última celda de la tabla de cada fila que para nuestro ejemplo será el precio, en la siguiente línea se válida que si ese valor está entre un determinado rango entonces que muestre la fila, de lo contrario que la oculte.

Finalmente se verá algo así:

Imagen1

Espero les sea de utilidad, como siempre les dejo el código del ejemplo, para este caso solo en VB, ya que en C# lo único que cambia es la forma de cargar el grid y pues la idea de este ejemplo es otra:

Link al ejemplo !

Filtrar GridView con JQuery

Posted on

En el post pasado (miralo aca) vimos como podemos añadir la funcionalidad de ordenamiento a un gridview utiizando jQuery, mencionamos el uso del los css friendly controls adapters para mejorar el renderizado del grid  poder hacer uso del plugin de jQuery.

En este artículo vamos a revisar como podemos añadir un textbox el cual al ir ingresado caracteres nos ayudará a ir filtrando nuestro grid, similarmente como el ejemplo del post anterior haremos uso de los css friendly controls adapters para mejorar el renderizado del grid.

Para este ejemplo vamos a utilizar el plugin de jQuery quickSearch, en este caso utilizaremos el mismo ejemplo del post anterior solo que le añadiremos esta nueva funcionalidad.

Primero añadimos una referencia al plugin de jQuery quickSearch, luego añadimos un textbox donde al ir escribiendo se realizará el friltro del grid,  finalamente el código jQuery:

  
$(function () { 
$("#<% = grvDatos.ClientID %> table").tablesorter(); 
$("#<% = txtBuscar.ClientID %>").quicksearch("#<% = grvDatos.ClientID %> table tbody tr"); 
}) 

Lo importante aca es la 3ra línea de código es donde vamos a hacer uso del plugin, primero el selector que desencadanará el evento es el campo de texto, luego le decimos que seleccione el gridview, y le añadimos algunos filtros los cuales son table para que seleccione la tabla (como vimos en el post anteriores la tabla se crea dentro de un div), luego que filtre el cuerpo de la tabla tbody y finalamente que seleccione las filas tr.

Como siempre les dejo el ejemplo en VB y en C#.

Ejemplo en VB !
Ejemplo en C# !

Ordenando GridView con JQuery

Posted on

En el post de hoy, quiero mostrar como con JQuery es muy fácil permirtir el ordenamiento de un gridview con tan solo dar clic en la cabecera de la columna, para realizar este ejemplo vamos a necesitar tres elementos:

  1. La libreria core de JQuery.
  2. El  plugin tablesorter.
  3. CSS Friendly Control Adapters.

El plugin tablesorter trabaja sobre una tabla HTML, pero necesita una tabla bien estructurada, es decir que su encabezado este definido por las etiquetas head, tr y th, y el cuerpo por las etiquetas tbody, tr y td. Cuando en asp.net utilizamos el control gridview, este es renderizado como una tabla, pero no con la estructura correcta, para solucionar este problema es que vamos a utilizar los CSS Friendly Control Adapters.

Ahora veamos que necesitamos para hacer uso de ellos:

  1. Añadimos una referencia  a la dll.
  2. Añadimos el archivo CSSFriendlyAdapters.browser

Luego cuando se realize la renderización de nuestro grid se hará correctamente, lo único a tener en cuenta es que el genera un div con  el id asignado al grid en tiempo de diseño, y dentro de este div, la tabla con los datos correspondientes, esto es importante tenerlo claro para nuestro pequeño código JQuery.

Ahora nuestro “extenso y complicado” código JQuery:

 
$(function () {
$("#<% = grvDatos.ClientID %> table").tablesorter();
})

Como se puede observar utilizamos un selector por ID  #<% = grvDatos.ClientID %> y lo filtramos aún más table para q seleccione la tabla, porque como se menciono anteriormente al renderizar el grid, se crea un div y dentro de este la tabla con nuestros datos.

Y eso es todo, al dar clic en el encabezado de cualquier columna del grid el orden cambiará automáticamente, así la aplicación finalmente lucirá algo así:

Luego vamos a ver como podemos agregar la funcionalidad de filtro al gridview.

Como siempre les dejo el código del ejemplo tanto en VB como en C#.

Ejemplo en VB !

Ejemplo en C# !

Ejemplos GridView

Posted on Actualizado enn

Hoy quiero compartirles un rápido post para dejarles un set con varios ejemplos sobre el uso del control de datos GridView, en los ejemplos encontrarán como editar, paginar y mostrar imágenes entre otros… espero les sea de utilidad.

Link al ejemplo !!

ItemTemplate y JQuery

Posted on Actualizado enn

Hola, bueno y comenzamos un nuevo año, lleno de energía, vamos con todo este año, nuevos post, y sobretodo a aprender muchisimo….

He visto que un gran problema al trabajar con el control GridView, se da cuando se define el template field de una columna como un textbox, y se desea restringir la entrada a solo números.

Aunque esto algunas veces nos de un poco de trabajo, si nos apoyamos en la libreria jquery nos será bastante fácil, y no solo podremos restringir la entrada de solo números, tambien podremos mejorar la presentación y la usabilidad para el usuario.

Entonces, vamos a tener 2 diferentes funcionalidades:

  1. Restringir la entrada a solo números.
  2. Cuando estemos trabajando en alguna fila, se cambiará el color de fondo del textbox.

Para lo primero, vamos a usar una libreria de jquery, jquery numeric que permite realizar dicha validación.

Al final la aplicación funcionará así:

Como no podemos saber exactamente cuantas filas vamos a tener en el grid, ni mucho menos los id de los controles, vamos a usar selectores de clase, en definitiva la definición de las columnas del grid nos debe quedar algo asi:

<Columns>
<asp:BoundField HeaderText=”Código” DataField=”Cod” />
<asp:BoundField HeaderText=”Descripción” DataField=”Des” />
<asp:TemplateField HeaderText=”Cantidad”>
<ItemTemplate>
<asp:TextBox ID=”txtCantidad” runat=”server” CssClass=”numeric” MaxLength=”10″></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>

Como se puede observar, la clase asociada al textbox se llama numeric, y será con el dicha clase que enlazaremos los eventos de validación.

Ahora nuestro código del lado del cliente:

$(function () {
$(“.numeric”).numeric();
$(“.numeric”).focus(function () { $(this).css(“background-color”, “#ECF8E0″); });
$(“.numeric”).blur(function () { $(this).css(“background-color”, “white”); });
});

En este caso, cuando escribimios .numeric, quiere decir que usamos un selector de clase, y que dicha clase sera la llamada numeric, asi todos los controles con dicha clase tendrán las funciones anteriores.

Y que hace cada línea:

  1. $(“.numeric”).numeric(); Permite solo el ingreso de caracteres numéricos.
  2. $(“.numeric”).focus(function () { $(this).css(“background-color”, “#ECF8E0″); }); Cuando el control tiene el foco el color de fondo es verde.
  3. $(“.numeric”).blur(function () { $(this).css(“background-color”, “white”); }); Cuando el control pierde el foco se cambia el color de fondo a blanco.

Y eso es todo, espero les ayude este corto, sencillo y fácil ejemplo.

Código del ejemplo !!

GridView, JQuery y un menú contextual

Posted on Actualizado enn

Hola a todos, bueno luego de algún tiempo sin subir nada, y se que entienden cuando se esta termiando un proyecto, hoy quiero mostrarles como podemos hacer un menú contextual con jquery y un gridview.

Pero por que hacer un menú contextual?… muchas veces nos cansamos de tener 2,3 o mas botones en cada fila del grid.. y que mejor q un menú contextual apra tener todas las opciones en el mismo sitio..!!

Como primero quiero mostrarles como va a quedar nuestro menú.

Bueno ya sabemos como debe quedar, ahora manos a la obra.

Lo primero que necesitamos son dos librerias de jquery (en el ejemplo adjunto las encuentran), las agregamos a nuestro proyecto y posteriormente las referenciamos en nuestra página… es decir, no debe quedar algo asi:


<script src="Scripts/jquery-1.4.2.js" type="text/javascript"></script>

<script src="Scripts/jquery.contextMenu.js" type="text/javascript"></script>

y alli lo q estamos haciendo es referenciando los archivos de script a la página.

Ahora, el menú contextual no es nada más que una simple lista, la cual definimos de la siguiente manera:


<ul id="myMenu" class="contextMenu">

<li class="Opcion"><a href="#Opcion1">Opción 1</a></li>

<li class="Opcion"><a href="#Opcion2">Opción 2</a></li>

<li class="Opcion"><a href="#Opcion3">Opción 3</a></li>

</ul>

en donde definimos tantos items de lista como opciones de menú necesitemos.

Luego de tener creado el “menú”, en la definición de las columnas del gridview, se debe definir una columna la cual tendrña una imagen o link o boton (lo que deseen) para que ar dar clic derecho podamos visualizar el menú), en resumen la columna quedaria:


<asp:TemplateField>

<ItemTemplate>

<div id="myDiv">

<img src="~/images/options.png" id="img" runat="server" title="Ver opciones [click derecho]" />

</div>

</ItemTemplate>

</asp:TemplateField>

Lo importante aqui es q el div que se define será el encargado de mostrar el menú contextual, por eso antes decia que se puede usar una imagen, un boton, etc, y dentro del div definimos el control, en mi caso usé una imagen de html.

Y en este punto ya hemos terminado con el diseño del gridview y del menú contextual, ahora lo que debemos hacer es con jquery crear de verdad el menú…nuestro código jquery quedaría así:


<script type="text/javascript">

    $(function() {

       $("#GridViewDatos div").click(function() {

            $("#GridViewDatos div").enableContextMenu();

    });

    $(document).ready(function() {

       $("#GridViewDatos div").contextMenu({

          menu: 'myMenu'

          }, function(action, el, pos) {

             switch (action) {

               case "Opcion1":

                  {

                   alert('Ha seleccionado la opción 1');

                   break;

                  }

               case "Opcion2":

                  {

                   alert('Ha seleccionado la opción 2');

                   break;

                  }

               case "Opcion3":

                  {

                   alert('Ha seleccionado la opción 3');

                   break;

                  }

               }

           });

       });

    });

    </script>

Bueno ahora vamos a comentar…

La primera función que tenemos, lo que hace activar el menú contextual en pocas palabras, y la segunda función la cual es la más compleja, y lo que hace es al div que encuentra dentro del gridview le asigna el menú que creamos, es decir la lista que se definio, por eso el id de la lista es el mismo valor del atributo menu. Luego viene una función que tiene tres argumentos, los cuales sirven para capturar la acción o el item seleccionado del menú contextual, una manera fácil es hacer un switch al action y definir diferentes case para cada opción, los case son definidos con base al valor href de la etiqueta “a” de la lista creada, por eso en el ejemplo se ha definido 3 case (opcion1,opcion2 y opcion3).. luego se muestra un mensaje informando la opción elegida, ya depende de cada necesidad definir la funcionaldiad deseada…

Buenos espero que les sea de ayuda el ejemplo… como siemore cualquier comentario es bien recibido…

Descarga del código fuente !!

En el siguiente post el cual espero subir la otra semana, vamos a realizar un autocomplete contra una base de datos sql con jquery…

Paginando el gridview

Posted on Actualizado enn

Hola, bueno como dije en mi anterior post, quiero mostrar como podemos hacer una paginación elegante y un poco más funcional de nuestros afamado gridview.

Muchas veces, necesitamos y queremos q nuestra interfaz de usuario sea más amigable y bonita, puesto que lo que el usuario ve es la interfaz (muchas veces no le importa lo que está por detrás)…

En ejemplo vamos a cargar un gridview desde un archivo xml el cual contiene la lista de todos los paises del mundo (si falta alguno disculpad); dicha lista contine 241 paises, lo cual haría que nuestro gridview se extendiera demasiado hacia abajo, para evitar que esto suceda vamos a usar la paginación.

La idea es disponer de un dropdownlist el cual va a contener todas las páginas del gridview, así podremos cambiar de página facilmente. Además, se visualizará cuatros imagenes las cuales tendrán la función de ir al primer, anterior, siguiente y último registro.

Es decir, al final nuestro gridview debe lucir parecido a:

Para lograr esta funcionalidad, ahi varias cosas que se deben definir.
1.Establecer la propiedad AllowPaging=”true” del gridview
2.Establecer el número de filas o registros que deseamos ver por página en el grid (ej: PageSize=”10″)
3.Personalizar el pagertemplate.
4.En el dropdownlist del pagertemplate, se ha definido el evento OnSelectedIndexChanged=”GoPage”, en este evento vamos a cambiar el la página q estamos visualizando, asi en nuestro codebehind, vamos a definir un procedimiento protected (protected para que pueda ser accedido desde el html).

Además de los pasos anteriores es necesario
1.Definir el procedimiento para cargar el gridview
2.Añadir la lógica necesaria en el evento PageIndexChanging para que nuestros botones de navegación funcionen, en este caso, con la variable e podemos acceder al numero de la página a traves de la propiedad NewPageIndex.
3.En el evento RowDataBound del gridview, se debe cargar el dropdownlist; y el label para mostrar el número total de páginas.

Como se puede ver, con solo unos pequeños pasos extendemos la funcionalidad de la paginación del gridview.

Descarga del ejemplo !

Nos vemos en el siguiente post, para seguir mostrando mas funcionalidades del control gridview…

GridView y PopupControlExtender

Posted on Actualizado enn

Hola a todos, a diario en mi trabajo, he tenido q trabajar bastante con el control gridview de asp, y he tenido que agregarle varias funcionalidades, para que sea mas amigable al usuario y para que su funcionamiento sea mas adecuado… asi que he decidido hacer varios post (este seré el primero sobre este control), para que cualquiera pueda mejorar la usabilidad de este control).

En este post, quiero mostrar como podemos mostrar detalles del gridview de forma “modal” con el popupcontrolextender, y asi darle mas usabilidad a nuestro gridview…
sin más carreta vamos a lo que nos interesa.

La idea es poder mostrar detalles de nuestro gridview con solo pasar el mouse por encima de un boton de detalles, como vemos en la siguiente imagen:

Asi, al pasar el mouse por cada uno de las imagenes, vamos a visualizar el nombre del pais y de la ciudad (un ejemplo simple, ya ustedes veran como aplicarlo).

Pero que necesitamos, como mencione anteriormente, vamos a usar el popucontrolextender del toolkit de ajax (si no lo tienes descargarlo aqui)

Ahora vamos a comenzar a constriur nuestro programa.

Agregamos un control grdiview a nuestra pagina aspx, y dentro de la definición de las columnas, agregamos un imagebutton y un popupcontrol extender, lo importante aqui, es que debemos comunicarnos con el servidor para poder hacer la consulta contra la base de datos y asi poder mostar los detalles, asi que en la propiedad DynamicServiceMethod del popupcontrolextender le damos el nombre de un WebMethodAttribute existente en nuesto codebehind, y en la propiedad DynamicContextKey le vamos a enviar los parametros para poder hacer los filtros en la consulta….

Dentro de nuestro WebMethodAttribute el cual debemos definir como shared en visual basic (static en c#), vamos a realizar laconsulta contra la base de datos, asi como se debe crear una tabla el la cual visualicemos los resultados…

Bien es sabido, que el popupcontrol se activa al dar click en un control (es nuestro caso imagebutton), y como la idea es mostrar los detalles con solo pasar el mouse por encima de la imagen, se debe agregar este comportamiento, lo cual hacemos en el evento rowcreated del gridview…alli agregamos los enventos onmouseover para mostrar los detalles al pasar el mouse por encima y onmouseout para ocultarlo cuando quitemos el mouse…

Como ven, no es algo complicado y si hará que nuestras aplicaciones sean más rápidas y mas fáciles para el usuario…lo cual es algo fundamental…

Link con el ejemplo !!

Espero les sea util este ejemplo y nos vemos en un próximo ejemplo, donde mostraré como hacer una paginación elegante y funcional del gridview…