Wijmo UI for the Web
Setting Conditional Format

Wijgrid provides you the ability to put conditional formatting on cells such as depicting a value that is greater than a specified value in red color. This kind of formatting enhances data representation.

Use the script below to put conditional formatting on the grid cells such that, if value of discount at any particular instance is greater than 25%, the value is displayed in red.

Script
Copy Code
<script id="scriptInit" type="text/javascript">
        require(["wijmo.wijgrid"], function () {
            $(document).ready(function () {

                // bind the grid
                $("#demo").wijgrid({
                    data: getData(12),
                    columnsAutogenerationMode: "none",
                    columns: [
{ dataKey: "Country", headerText: "Country", dataType: "string" },
{ dataKey: "ProductName", headerText: "Product Name", dataType: "string" },
{ dataKey: "UnitPrice", headerText: "Unit Price", dataType: "currency" },
{ dataKey: "Quantity", headerText: "Quantity", dataType: "number", dataFormatString: "n0" },
{ dataKey: "Discount", headerText: "Discount", dataType: "number", dataFormatString: "p0",
cellFormatter: function (args) {
if (args.row.type & $.wijmo.wijgrid.rowType.data) { // data row (not group header)
if (args.row.data.Discount > .25) {             // discount > 25%? bold + red!
args.$container.css("font-weight", "bold");
args.$container.css("color", "red");
      }
    }
  }
}
]
 });
   });
     });
// random data generators
function getData(count) {
var data = [];
var country = "USA,UK,Germany,Italy,Japan,Brazil,Canada".split(",");
var name = "Lorem,Ipsum,Dolor,Amet,Consectetur".split(",");
var suffix = "LLC,Inc".split(",");
for (var i = 0; i < count; i++) {
data.push({
    TransactionID: i,
    Country: getString(country),
    ProductName: getString(name) + " " + getString(suffix),
    UnitPrice: Math.floor(getNumber(5, 10)),
    Quantity: Math.floor(getNumber(1, 5)) * 10,
    Discount: getNumber(0, 0.3)
});
   }
return data;
  }
function getString(arr) {
return arr[Math.floor((Math.random() * arr.length))];
  }
function getNumber(lo, hi) {
  return lo + Math.random() * (hi - lo);
        }
function getDate(daysAgo) {
 return new Date((new Date()).getTime() - daysAgo * 24 * 3600 * 1000);
        }
    </script>