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 & $.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

MESCIUS inc.

comments powered by Disqus