Few of our customers had a requirement to change the background of a cell depending on its contents. This can be easily accomplished using the cellStyleFormatter utility provided by Wijgrid. For eg. if the value in a cell is less than 25, then its background color should be yellow and the forecolor should be red.

 

We can use the following code to fulfill this requirement :

cellStyleFormatter: function (args) {
   if ((args.row.type & $.wijmo.wijgrid.rowType.data)) {
      if (parseInt(args.$cell.text()) < 25) {
         args.$cell.css("background-color", "yellow");
         args.$cell.css("color", "red");
      }
   }
}

While implementing the above requirement, it occurred to me that why not toggle the background color so that it gives a blinking effect! So, here I’m writing an article on how to give a blinking effect to the cells in Wijgrid.

It’s pretty simple. All we need to do is toggle the background color of the cells every 500 milliseconds or so. Take a look at the code given below :

$("#wijgrid1").wijgrid({
   loaded: wijgrid_loaded
});

function wijgrid_loaded(e, args) {
   grid1cells = new Array();
   var cols = $("#wijgrid1").wijgrid("columns").length;
   for (var i = 0; i < cols; i++) {
      grid1cells.push($("#wijgrid1").find(".wijmo-wijgrid-row").find("td:eq(" + i + ")"));
   }
   setInterval(toggleBackColorGrid, 1000);
}

function toggleBackColorGrid() {
   //toggle backcolor of cells
   $.each(grid1cells, function (index, cols) {
      $.each(cols, function (index, elem) {
         if (parseInt($(elem).text()) < 25) {
            if ($(elem)[0].style.backgroundColor == "rgb(255, 255, 0)") {
               $(elem).css("background-color", "transparent");
               $(elem).css("color", "black");
            }
            else {
               $(elem).css("background-color", "yellow");
               $(elem).css("color", "red");
            }
         }
      })
   });
}

We store the cells of wijgrid in an array in the loaded event of wijgrid and then toggle their background using the toggleBackColorGrid() function.

Take a look at the demo given below :

Demo