ignite-ui infrafistics grid computed checkbox column

2015 version

by wwwroot

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/2015.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2015.2/latest/js/infragistics.lob.js"></script>
<script src="http://igniteui.com/js-data/northwindProducts"></script>
<link href="http://cdn-na.infragistics.com/igniteui/2015.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/igniteui/2015.2/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<table id="resultGrid"></table>

CSS

.c1 {
  background-color: red;
}

JavaScript

$(function() {

  function calculateTotal(data, grid) {
    var res = data["Exclude1"] * data["Exclude2"] * data["Exclude3"];
    console.info(res);
    return res;
  }


  var columnSettings = [{
    headerText: "Product Name",
    key: "ProductName",
    readOnly: true
  }, {
    headerText: "All",
    key: "all",
    readOnly: false,
    dataType: "bool",
    unbound: true,
    formula: calculateTotal
  }, {
    headerText: "Exclude1",
    key: "Exclude1",
    readOnly: false,
    dataType: "bool"
  }, {
    headerText: "Exclude2",
    key: "Exclude2",
    readOnly: false,
    dataType: "bool"
  }, {
    headerText: "Exclude3",
    key: "Exclude3",
    readOnly: false,
    dataType: "bool"
  }, ];
  $('#resultGrid').igGrid({
    dataSource: data,
    primaryKey: "ProductName",
    responseDataKey: "results",
    dataSourceType: "json",
    width: "100%",
    enableHoverStyles: false,
    autoGenerateColumns: false,
    columns: columnSettings,
    renderCheckboxes: true,

    features: [{
      name: "Filtering",
      allowFiltering: true,
      caseSensitive: false
    }, {
      name: 'Sorting',
      type: "local",
    }, {
      name: "Updating",
      validation: false,
      enableAddRow: false,
      editMode: "cell",
      excelNavigationMode: true,
      enableDeleteRow: false
    }]
  });
});

var data = [{
  "ProductID": 1,
  "ProductName": "Chai",
  "Exclude1": false,
  "Exclude2": true,
  "Exclude3": false
}, {
  "ProductID": 2,
  "ProductName": "Chang",
  "Exclude1": false,
  "Exclude2": false,
  "Exclude3": true
}, {
  "ProductID": 3,
  "ProductName": "Aniseed Syrup",
  "Exclude1": true,
  "Exclude2": true,
  "Exclude3": true
}, {
  "ProductID": 4,
  "ProductName": "Chef Anton's Cajun Seasoning",
  "Exclude1": false,
  "Exclude2": false,
  "Exclude3": true
}, {
  "ProductID": 5,
  "ProductName": "Grandma's Boysenberry Spread",
  "Exclude1": false,
  "Exclude2": false,
  "Exclude3": true
}];