igGrid - Cell Background on Condition

Ignite UI Sample by Infragistics

by georgianastasov

HTML

<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<table id="grid"></table>

JavaScript

$(function() {
    var adventureWorks = [
    		{
            "ProductID": 321,
            "Name": "Chainring Nut",
            "ProductNumber": "CN-6137",
            "MakeFlag": false,
        },
        {
            "ProductID": 322,
            "Name": "Chainring",
            "ProductNumber": "CR-7833",
            "MakeFlag": false,
        },
        {
            "ProductID": 323,
            "Name": "Crown Race",
            "ProductNumber": "CR-9981",
            "MakeFlag": true,
        },
        {
            "ProductID": 324,
            "Name": "Chain Stays",
            "ProductNumber": "CS-2812",
            "MakeFlag": false,
        },
        {
            "ProductID": 325,
            "Name": "Decal 1",
            "ProductNumber": "DC-8732",
            "MakeFlag": true,
        },
        {
            "ProductID": 326,
            "Name": "Coreal",
            "ProductNumber": "DC-9824",
            "MakeFlag": true,
        },
        {
            "ProductID": 327,
            "Name": "Down Tube",
            "ProductNumber": "DT-2377",
            "MakeFlag": false,
        },
        {
            "ProductID": 328,
            "Name": "Mountain End Caps",
            "ProductNumber": "EC-M092",
            "MakeFlag": true,
        },
        {
            "ProductID": 329,
            "Name": "Road End Caps",
            "ProductNumber": "EC-R098",
            "MakeFlag": false,
        },
        {
            "ProductID": 330,
            "Name": "Touring End Caps",
            "ProductNumber": "EC-T209",
            "MakeFlag": true,
        }
    ];

    $("#grid").igGrid({
        autoGenerateColumns: false,
        renderCheckboxes: true,
        width: "100%",
        primaryKey : "ProductID",
        autoCommit:true,
        columns: [{
                headerText: "Product ID",
                key: "ProductID",
                dataType: "number",
                width: "15%"
            },
            {
               ...