Skip to main content Skip to footer

Cell Blink in Wijgrid

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 & $ {  
      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 :

   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


comments powered by Disqus