ASP.NET + JqGrid + Filtros DropDownList

Hola a Todos.

En el último post sobre JqGrid vimos como crear un botón para exportar a Excel la lista de elementos mostrados por el Grid.

Partiremos de este desarrollo para asignarle a nuestro Grid un conjunto de Filtros DropDown en algunas de las columnas.

Lo primero que haremos es modificar el modelo e objetos que habíamos usado hasta ahora, para agregarle un par de propiedades a través de las cuales filtrar.

Modificamos la clase “Pago” y le agregamos la siguiente enumeración con los tipos de Pagos:

public enum TipoPago { Efectivo = 1, Tarjeta = 2, Transferencias = 3 }

Ahora crearemos en la misma clase “Pago” las siguientes propiedades:

public string Ciudad { set; get; }         public TipoPago MetodoPago { set; get; }         public string MetodoPagoText         {             get             {                 return this.MetodoPago.ToString();             }         }

Como podemos ver, hemos creado una Propiedad “Ciudad” del tipo string, una propiedad “MetodoPago” del tipo “TipoPago” que hemos creado previamente y una ultima “MetodoPagoText” que no es mas que una cadena con el texto de la propiedad “MetodoPago”.

Con las propiedades creadas los siguiente que vamos a hacer es modificar la función que nos creaba la lista de objetos “Pago” (recordad que esta función simulaba la respuesta de origen de datos como puede ser una base de datos), para que genere también los datos de estas nuevas propiedades que hemos creado.

public static List<Pago> GetListaPagos()         {             List<Pago> data = new List<Pago>();             Random rnd = new Random();             for (int n = 0; n < 30; n++)             {                 int num_days = rnd.Next(-365, -30);                 DateTime fecha = DateTime.Today.AddDays(num_days);                 decimal importe = Math.Round(Convert.ToDecimal((rnd.NextDouble() * 1000)), 2);                 decimal tasa = Math.Round(Convert.ToDecimal((rnd.NextDouble() * 100)), 2);                 decimal total = Math.Round((importe + tasa), 2);                 int num_typePago = rnd.Next(1, 4);                 int num_city = rnd.Next(1, 5);                 string ciudad = "";                 switch (num_city)                 {                     case 1: ciudad = "BCN"; break;                     case 2: ciudad = "MAD"; break;                     case 3: ciudad = "PMI"; break;                     case 4: ciudad = "BIO"; break;                 }                 data.Add(new Pago()                 {                     ID = n + 1,                     FechaPago = fecha,                     Concepto = "JOHN DOE " + (n + 1).ToString(),                     Importe = importe,                     Tasas = tasa,                     Total = total,                     Notas = "Nota " + (n + 1).ToString(),                     MetodoPago =  (Pago.TipoPago)num_typePago,                     Ciudad = ciudad                 });             }             return data;         }

Ahora la lista de Pagos ya informa los campos “MetodoPago” y Ciudad.

Si ejecutamos nuestra aplicación veremos que estas nuevas propiedades aun no se muestran en el Grid, eso se debe a que aun no hemos modificado el Grid para que tenga en cuenta esta columna.

Pues ya sabemos que es lo que nos toca ahora….modificar el Grid para agregar las nuevas columnas.

{ name: 'Ciudad', label: 'Ciudad', width: 160, sortable: false, align: "center", hidden: false},                     { name: 'MetodoPagoText', label: 'T.Pago', width: 180, sortable: false, align: "center", hidden: false },

Si ahora ejecutamos la pagina veremos que ahora si que se muestran estas nuevas columnas

Bueno, ahora ya tenemos nuestra página lista para poder empezar a asignarle los filtros.

Como podéis imaginar le agregaremos dos filtros uno por columna “Ciudad” y otro por columna “T.Pago”.

Lo primero que vamos a hacer es decirle a nuestro Grid que vamos a usar “FilterToolBar” como método de filtrado. Para ello agregaremos el siguiente código a nuestro Grid.

.jqGrid('filterToolbar', {                 stringResult: false,                 multipleSearch: true,                 searchOnEnter : true,                 defaultSearch : "eq"             });

Si ahora ejecutamos veremos que ya se nos a agregado en la parte superior de cada columan los campos para filtrar los datos:

Lo siguiente que vamos a hacer es eliminar los filtros de todas aquellas columnas por las cuales no vamos a filtrar (que son todas exceptuando las de “Ciudad” y “T.Pago”).

Para ello, en el a cada columna le agregamos la propiedad “search: false”.

Ahora ya solo se nos deberían mostrar únicamente los filtros de los campos que queríamos.

Pero lo que buscamos es poder filtrar a través de un DropDown, con lo que vamos a configurar los filtros de las columnas para poder elegir los valores sobre los que filtrar a partir de un menú DropDown.

A la configuración de la columna “Ciudad” le agregaremos el siguiente código.

, search: true, stype: 'select', editoptions: { value: ':All;BCN:BCN;MAD:MAD;PMI:PMI;BIO:BIO', sopt: ['eq'] }

Como podemos ver estamos especificando la lista de valores que se mostraran en el menú (tanto valor como texto a mostrar).

Para la columna “MetodoPagoTexto” agregamos el siguiente código:

, search: true, stype: 'select', editoptions: { value: ':All;1:Efectivo;2:Tarjeta; 3:Transferencias', sopt: ['eq'] }

Es importante que el valor de cada opcion se corresponda con el que hemos asignado en la enumeración, ya que de lo contrario el filtrado se haría entre opcines diferentes.

Ahora ya deberían verse los filtros como deseábamos

Ahora nos tocara modificar la función de servidor que se encargaba de devolver la lista de “Pago” para que se encargue de realizar el filtrado en función de los valores que hemos seleccionado.

Antes de empezar a modificar esta función, lo primero que vamos a necesitar es instalar en nuestro proyecto la referencia a la librería “Newtonsoft.Json”. Yo personalmente la he agregado a través de NuGet

Ahora si que modificaremos nuestro webservice para capturar el valor de los filtros seleccionados por nuestro Grid. Para ello agregaremos el siguiente código al principio del método de nuestro WebService:

HttpRequest request = HttpContext.Current.Request;             HttpResponse response = HttpContext.Current.Response;             Stream stream = request.InputStream;             byte[] bytes = new byte[stream.Length];             stream.Position = 0;             stream.Read(bytes, 0, (int)stream.Length);             string dataStr = Encoding.ASCII.GetString(bytes); // this is your string             JObject root = JObject.Parse(dataStr);

Lo que hemos hecho es consultar el InputStream de la request para ver con que parámetros se ha invocado nuestro método, de los cuales extraeremos sus valores para proceder al filtrado.

En la misma función, después de la sección donde filtrábamos los datos por el número de página agregaremos el código para filtrar los registros. agregando el siguiente código:

//Aplicar Filtros             JProperty propMetodoPago = root.Property("MetodoPagoText");             if (propMetodoPago != null)             {                 Pago.TipoPago typoSel = (Pago.TipoPago)Convert.ToInt32(propMetodoPago.Value.ToString());                 data = data.Where(e => e.MetodoPago == typoSel).ToList();             }             JProperty propCiudad = root.Property("Ciudad");             if (propCiudad != null)             {                 string city = propCiudad.Value.ToString();                 data = data.Where(e => e.Ciudad == city).ToList();             }

Tras este filtrado, nuestro Grid ya debería ser capaz de filtrar los registros por los valores que hemos seleccionado.

Bueno, esto ha sido todo por hoy

Podéis bajaros el proyecto de ejemplo del siguiente enlace

https://www.dropbox.com/s/ob1io23j2xyu5ue/TestJqgridFilter.rar

Espero que os resulte útil.