jqGrid - Mas funcionalidades (I)

En el post anterior de “jqGrid” vimos cómo se podía implementar jqGrid en un desarrollo en ASP.NET MVC.

En las siguientes entradas, iré mostrando algunas de las funcionalidades y pequeños trucos y consejos.

En esta entrada veremos:

• Cómo modificar el tamaño del Grid, según el tamaño de nuestro navegador (Resize)
• Definir un tamaño mínimo de alto de nuestro Grid (height)
• Ordenación de las columnas (Sorted)
• Paginación

 

Resize (Cambiar el tamaño del navegador)

Este script lo aplicaremos en la Vista (en la misma página que tendremos definido nuestro jqGrid y nuestro contenedor correspondiente):

<script type="text/javascript">         jQuery(window).bind('resize', function () {         jQuery("#list").setGridWidth(jQuery('#grid_container').width() - 20, true);     }).trigger('resize'); </script>

La idea es sencilla, simplemente capturamos el evento “resize” de la ventana, y marcamos a nuestra lista el tamaño de ancho que tiene su contenedor. (le quitamos 20 pixeles simplemente para asegurarnos que si aparece la barra de scroll, se siga visualizando correctamente nuestra lista)

La propiedad autowidth tiene que estar a true (autowidth: true)

Mantener un tamaño mínimo de alto del grid.

Para conseguir que la altura de nuestra lista no esté definida por el número de registros mostrados,  podemos indicar un tamaño mínimo, que nos permita tener un grid visualmente más atractivo en el caso que sólo tengamos 2 registros.

Utilizaremos la función “gridComplete”, que  es un método existente del objeto jqGrid (que lo tenemos definido en la Vista), y  se ejecuta una vez se haya cargado la lista.

jQuery(document).ready(function () {     jQuery("#list").jqGrid({         …         …         …         gridComplete: function () {             if (jQuery("div.ui-jqgrid-bdiv > DIV").height() < 249) {                 jQuery("#list").parents('div.ui-jqgrid-bdiv').css("height", 250);             }             else {                 jQuery("#list").parents('div.ui-jqgrid-bdiv').css("height", "100%");             }         }               }); });

Para ello, lo único que tenemos que hacer es mirar el tamaño de alto del contenedor.
Si el tamaño es menor al tamaño mínimo deseado, le forzaremos a que el height de la lista sea el deseado. En caso contrario, dejaremos el tamaño que nos indica el propio grid.

Ordenación 

Para “activar” la funcionalidad de ordenación al clickar en las cabeceras de  cada columna, hemos de tener en cuenta los 3 “módulos” de MVC (El  Modelo, La Vista y el Controlador).

En la Vista definiremos si una columna se puede ordenar o no, simplemente aplicando la propiedad  sortable:false

En el Controlador definiremos el método que llama nuestro jqGrid para que nos devuelva los valores serializados en JSON. En este método definiremos una función de comparación, según la columna que se haya clickado (sidx). Si una de las columnas está definida como sortable=false, no será necesaria definirla dentro de esta función.

Este mismo método también recibirá el parámetro “sord” que indicará si el orden es ascendiente o descendiente

public ActionResult ObtenerDatosItemGrid(string sidx, string sord, int page, int rows) {     …     Func<Models.Comunidades_Autonomas, IComparable> funcOrden =         sidx == "com_comunidadid" ? a => a.com_comunidadid :         sidx == "com_nombre" ? a => a.com_nombre :         sidx == "com_poblacion" ? a => a.com_poblacion :         sidx == "comm_partido" ? a => a.comm_partido :         sidx == "com_fechaaprobacion" ? a => a.com_fechaaprobacion :         (Func<Models.Comunidades_Autonomas, IComparable>)(a => a.com_nombre);     var itemsPlanning = FuncionalidadesData.ObtenerItemsComunidades(page, rows, funcOrden, sord);                 … }

En el Modelo crearemos un método que accederá a los datos (en este caso estamos utilizando LINQ to Entities para acceder a la base de datos).

Una vez hayamos hecho la selección de los registros a mostrar, lo ordenaremos según la función de comparación

public List<Comunidades_Autonomas> ObtenerItemsComunidades( int pagina, int elementosPorPagina, Func<Comunidades_Autonomas, IComparable> orden, string ordenacion) {     var ItemsComunidades = from c in data.Comunidades_Autonomas select c;     IEnumerable<Comunidades_Autonomas> datos;     if (ordenacion == "asc")         datos = ItemsComunidades.OrderBy(orden);     else         datos = ItemsComunidades.OrderByDescending(orden);           … }

Paginación

Para “activar” la funcionalidad de paginación también hemos de tener en cuenta los 3 “módulos” de MVC (El  Modelo, La Vista y el Controlador).

En la Vista hemos de  tener en cuenta las propiedades del jqGrid rowNum y rowList, que nos indicarán el tamaño inicial de la lista y los diferentes tamaños que podremos seleccionar

rowNum: 15,

rowList: [15, 30, 45, 100],

También hemos de tener creado un controlador un <div> dentro del contenedor principal, que nos indicará dónde irá la barra de paginación, y a su vez, dentro de jqGrid, tendremos que asociar la propiedad de paginación con el contenedor mencionado

pager: jQuery('#pager'),

El Controlador recibirá un parámetro indicando cuantos registros por página tendremos (rows), y otro parámetro que nos indicara la página actual (page)

En el Controlador también tendremos que obtener el número de registros totales, y mediante este valor y el número de registros por página, podremos obtener el total de páginas

public ActionResult ObtenerDatosItemGrid(string sidx, string sord, int page, int rows) {     …     var itemsPlanning = FuncionalidadesData.ObtenerItemsComunidades(page, rows, funcOrden, sord);     int totalRegistros = FuncionalidadesData.ContarItemsComunidades();     int totalPages = (int)Math.Ceiling((decimal)totalRegistros / (decimal)rows);                 var data = new     {         total = totalPages,                 // Total de páginas         page = page,                        // Página actual         records = totalRegistros,           // Total de registros (obtenido del modelo)         …         };     … }

En el Modelo, devolveremos el número de registros que mostraremos según la página  y número de página actual.

public List<Comunidades_Autonomas> ObtenerItemsComunidades( int pagina, int elementosPorPagina, Func<Comunidades_Autonomas, IComparable> orden, string ordenacion) {     …     return datos.Skip((pagina - 1) * elementosPorPagina).Take(elementosPorPagina).ToList(); }

 

Para descargarte el código completo de ejemplo clica aquí.