miércoles, 14 de marzo de 2018

JQgrid- Como cambiar el color de las filas de forma dinámica

Antes que nada, quiero comentarles que la solución empleada es una de las tantas que pueden encontrarse en internet. Pero a veces, estoy seguro que al menos alguna vez les ha pasado, la solución encontrada no se ajusta al problema que queremos resolver o, directamente, no funciona.  Es en esos momentos donde siempre recuerdo la frase para estas situaciones: “No es como en las películas”.

A continuación, les doy una solución que realmente sirvió en mi caso y que quería compartir para que, aquellos que se encuentren con este problema, sumen otra alternativa más en su lista de soluciones posibles.

El pedido

Para un proyecto en el cual estaba dando mantenimiento, se pidió implementar una funcionalidad donde poder identificar en una grilla por medio de colores, las filas que generaron diferencias en las compensaciones. No voy adentrarme mucho en detalle sobre las reglas de negocio de la aplicación, sino que quiero poner foco en cómo llegué a poder resolver el problema de una forma rápida, sencilla y correcta. En principio, lo único que deben recordar es que es una grilla con compensaciones, donde algunas filas tienen diferencias y otras no.

Se optó, para este caso en particular, resaltar en rojo aquellas filas que tuvieran diferencias, y en verde las que no.

Ya planteado el problema, pasemos entonces a evaluar la solución.

La solución que tuvo éxito

Teniendo en cuenta los eventos que posee JQgrid, se tomó específicamente el evento .onLoadComplete(). El mismo permite ejecutar acciones posteriores al momento de finalizarse la carga de la grilla en la vista.

Entonces se procedió a agregar una Función JavaScript al evento llamada loadComplete() [figura 1]

@(Html.jqGrid("Grilla")
.onLoadComplete("loadComplete()")

Figura 1 –se agrega la función al evento 

Dentro de esta función se llama a la propiedad “jqGrid('getDataIDs')” de la grilla, la cual nos permite obtener los ID de cada una de las filas de la grilla. Una vez que los tenemos, entonces se puede acceder a la celda que se necesita evaluar, por medio de la propiedad getCell(), especificando el ID de la fila y el nombre de la columna que se desea verificar.

var rowIds = $("#Grilla").jqGrid('getDataIDs');                  
rowData = $("#Grilla").getCell(rowIds[i], 'Diferencia');
Luego se toma como referencia algún valor que determine la condición que debe tener en cuenta para aplicar el criterio de los colores. En nuestro ejemplo, vamos a evaluar si contiene a la letra ‘N’.

Este es un caso muy específico, pero puede aplicarse a otro tipo de condiciones, no tiene por qué ser solo una columna, ni tampoco un solo valor. Hasta puede ser una ecuación entre varios datos de distintas columnas. Pero mi consejo es que en lo posible busquemos resolver esta cuestión antes de que llegue a la grilla, es decir, en el backend de la aplicación. De este modo, con sólo agregar una columna más a la grilla y ocultarla será más sencillo de evaluar la condición del lado del cliente. 

Veamos cómo quedó el código completo.

var rowIds = $("#Grilla").jqGrid('getDataIDs');
  
  //recorre todos los id de la grilla
for (i = 0; i <= rowIds.length; i++) {

//obtiene el valor de la celda y lo evalúa
rowData = $("#Grilla").getCell(rowIds[i], 'Diferencia');
     if (rowData != 'N') {
        //aplica la clase  ‘ConDiferencias’ de css  a toda la fila     
$("#Grilla").jqGrid('setRowData', rowIds[i],true,     'ConDiferencias');
     }
else
{
   //aplica la clase  ‘SinDiferencias’ de css  a toda la fila
$("#Grilla").setRowData(rowIds[i], false, 'SinDiferencias');
     }
 }//fin for

Podemos notar que, en primera instancia, luego de obtener los ID de la grilla necesitaremos recorrerlos para acceder a cada propiedad de la fila.

Luego obtenemos el valor de la celda y se evalúa el criterio para aplicar los colores. Para este caso usamos la propiedad setRowData() para modificar el estilo de la fila.  

En esta propiedad se debe indicar en qué fila (rowIds[i]) y cuál estilo debe aplicar. Como se puede ver hay dos maneras de invocarla:

$("#Grilla").jqGrid('setRowData',rowIds[i],true,'ConDiferencias');
ó
$("#Grilla").setRowData(rowIds[i], false, 'SinDiferencias');

El parámetro que se pasa como “false” en la segunda forma, indica que va a afectar a toda la fila.

Un punto muy importante a tener en cuenta para que esto funcione, es que el campo que se quiere evaluar debe estar configurado como ID en la grilla jqgrid.

Esta solución fue muy útil y rápida al no tener que modificar ninguna configuración de la grilla y sirvió como ejemplo para otras pantallas e, incluso, para otros proyectos.

Autor
Marcos Guaymas – 
Técnico superior en Sistemas – 
Desarrollador .Net en Baufest