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