Menu

GridView con scroll infinito

febrero 25, 2012 - ASP.NET, jQuery

Introducción

Mostrar información al usuario creo que es el mayor reto que se nos propone en nuestro trabajo diario, si bien no es dificil mostar un Label o un GridView con información si lo es en la medida que qué tipo de infromación sea y cuanta informacion se debe mostrar, por ejemplo, en mi trabajo una vez creé un módulo para mostrar pacientes con cierta información en pantalla, hasta ahí no hay nada complejo, el reto surge cuando me doy cuenta que la consulta promerio son 500 registros asi que tenia dos opciones:

  1. Paginar el GridView
  2. Mostrarlo todo en pantalla
En mi caso ninguna me parecía ni funcional ni estéticamente correctas, así que le pregunte al oráculo que todo lo sabe – San Google – y opté por hacer una grilla con scroll a demanda que monta mas datos en la misma a medida que se solicitan haciendo scroll en la pantalla, algo así como en Google Reader. Al final eso fué lo que hice el cliente quedó contento y mi jefe también.

Resultado

[youtube]http://www.youtube.com/watch?v=3DxOwGuqVbA&context=C321bac5ADOEgsToPDskL0MjNowLv6XAkGW9p0-BQl[/youtube]

Proyecto

Como no explicaré el webservice ni las capas de acceso a datos ni a negocio les dejo el código fuente para que lo revisen más profundamente, está creado en Visual Studio 2010.

Requerimientos

Manos a la obra!

Como me pereza explicar todo Para ahorrarnos espacio en el blog iré al grano, el jQuery que hace la magia.
 var params = new Object();
 params.Skip = "50";

$(document).ready(function () {
 $(document).endlessScroll({
 bottomPixels: 200,
 fireOnce: true,
 fireDelay: 2000,
 callback: function (p) {
 $.ajax({
 type: "POST",
 data: $.toJSON(params),
 url: "PersonService.asmx/GetPersons",
 dataType: "json",
 contentType: "application/json",
 complete: function (response) {
 params.Skip = parseInt(params.Skip) + 50;
 },
 success: function (response) {
 var _Persons = $.evalJSON(response.d);

for (i = 0; i < _Persons.length; i++) {
 var tr = document.createElement("tr");
 var td = document.createElement("td");

td.innerHTML = _Persons[i].Name;
 tr.appendChild(td);

$("#gvPersons").append(tr);
 }
 },
 error: function (response) {
 alert("error");
 }
 });
 }
 });
 });
 

Ahora veamos por partes el código, primero como setear el plugin:

 $(document).ready(function () {
 $(document).endlessScroll({
 bottomPixels: 200,
 fireOnce: true,
 fireDelay: 2000,
 callback: function (p) {
 

bottomPixels: El número de pixeles desde en fin de la página que disparara el evento.

fireOnce: Solo dispara el evento una vez hasta que el anterior haya sido completado.

fireDelay: Demora el siguiente disparo del evento, esta opción es por si el usuario esta haciendo scroll con la rueda del mouse, llega al final y para no dispara el evento mientras sigue haciendo scroll se esperan 2 segundos.

Callback: La funcion que se ejecutara un vez el evento sea disparado.

Hasta acá no creo que haya nada marciano cierto?

 $.ajax({
 type: "POST",
 data: $.toJSON(params),
 url: "PersonService.asmx/GetPersons",
 dataType: "json",
 contentType: "application/json",
 complete: function (response) {
 params.Skip = parseInt(params.Skip) + 50;
 },
 

OK, aca lo que hacemos es indicarle al callback que lo que vamos a ejecutar una vez se alcancen bottomPixels para llegar al final de la página es un llamado ajax, lo uqe estamos enviando es la variable params que por ahora solo tiene Skip con un valor de 50, como se va a enviar a nuestro webservice que no he explicado la mejor manera de comunicarnos entre Javascript y .NET es mediante jSON, y usamos la funcion toJSON que viene en el plugin de JSON de Brantley Harris, al finalizar lo que haremos será aumentar la variable skip en 50 (llenamos la grilla con 50 registros cada vez que se dispara el evento)

 success: function (response) {
 var _Persons = $.evalJSON(response.d);

for (i = 0; i     var tr = document.createElement("tr");
 var td = document.createElement("td");

td.innerHTML = _Persons[i].Name;
 tr.appendChild(td);

$("#gvPersons").append(tr);
 }
 },
 error: function (response) {
 alert("error");
 }
 

Cuando el llamado al webservice finalice tomamos la respuesta (response.d que son varios registros de Personas codificadas en JSON) la decodificamos y simplemente lo que hacemos es crear los nuevos elementos necesarios para agregar los registros que hemos traído. Por último si surge un error mostramos el error que se produjo.

Conclusión

Si de mi dependiera utilizaría este código en todas las grilla del mundo xD, pero siempre hay necesidades específicas en este caso hacer una grilla de este estilo fue la mejor solución, como siempre les recomiendo hacer el ejemplo para aprender y si puede utilícenlo en sus proyectos!

Happy coding!

Etiquetas: , ,

2 pensamientos sobre “GridView con scroll infinito

Oscar

Hola
Una consulta cuando utilizo un panel en ves de todo el documento no funciona el metodo para traer los demas registros

Respuesta
Eduardo

Hola oscar, gracias por comentar.
Se tendría que revisar el diseño que estas usando, recuerda que el método que trae más datos se dispara a una cantidad determinada de pixeles del final de la página cuando se hacer scroll. De igual manera esta es solo una forma de implementarlo puede usar éste código para que el evento se dispare dentro del panel que mencionas o cualquier otra cosa que se te ocurra, solo es cuestion de explorar!

Gracias por comentar!

Respuesta

Deja un comentario

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