Unbound Columns

HTML

<script src="http://cdn-na.infragistics.com/jquery/20122/latest/js/infragistics.loader.js"></script>
<h1 class='logo'>Grid Unbound Columns</h1>
<p> Buttons and log box for column values below.</p>
<hr>
<table id='grid'></table>
<button onclick="getUnboundValues('total')"> Get Unbound values for Total </button>
<button onclick="getUnboundValues('name')"> Get Unbound values for Name </button>
<div id="log" style="overflow:auto; height:200px; background-color:#f2f2f2; padding:5px"></div>



<a title="Donwload your Ignite UI Free Trial now!" href="http://www.infragistics.com/products/jquery/downloads" target="_blank"><img alt="Donwload your Ignite UI Free Trial now!" src="http://media.infragistics.com/community/Release/12.2/jQuery/IgniteUI-download.jpg"></a>

CSS

.red
    {
        color: Red;
    }

/* --- Unrelated sample styling --- */

.logo
{
    background-image: url('http://www.infragistics.com/uploadedImages/Content/PRODUCTS/jQuery/ignite-secondary-navigation-logo.png');
    background-repeat: no-repeat;
    padding-left: 135px;
    margin: 5px;
    vertical-align: top;
    font-size: 1.2em;
}
body { font-size: 0.85em; font-family : "Segoe UI"}
button 
{
    text-decoration: none;
    line-height: 1.5em;
    background-color: #ACACAC;
    color: #fff;
    border: none;
}

button:hover
{
     background-color: #007FAF;
}
button:active
{
     background-color: #00AEEF;
}

JavaScript

function calcTotal(row, grid) {
    return row.SickLeaveHours + row.VacationHours;
};

window.getUnboundValues = function (key) {
    var unboundValues = $('#grid').igGrid('getUnboundValues', key);
    $("#log").prepend("<p> Unbound values for '" + key + "': " + JSON.stringify(unboundValues) + "</p>");
};
//Note - arrays used for data are below
$.ig.loader({
    scriptPath: "http://cdn-na.infragistics.com/jquery/20122/latest/js",
    cssPath: "http://cdn-na.infragistics.com/jquery/20122/latest/css",
    resources: "igGrid.Paging.Sorting.Filtering.GroupBy",
    theme: 'metro'
});

$.ig.loader(function() {

    /*  ------ GRID --------*/
    $('#grid').igGrid({
        autoGenerateColumns: false,
        autoGenerateLayouts: false,
        primaryKey: "BusinessEntityID",
        columns: [{
            key: 'BusinessEntityID',
            dataType: 'number',
            headerText: 'B.E. Id'},
        {
            unbound: true,
            key: 'name',
            headerText: 'Name',
            dataType: 'string'},
        {
            key: 'LoginID',
            dataType: 'string',
            headerText: 'Login Id'},
        {
            key: 'SickLeaveHours',
            dataType: 'number',
            headerText: 'Sick Leave Hours'},
        {
            key: 'VacationHours',
            dataType: 'number',
            headerText: 'Vacation Hours'},
        {
            unbound: true,

            key: 'total',
            headerText: 'Total',
            dataType: 'number',
            formula: calcTotal,
            template: "{{if data.key['SickLeaveHours'] === undefined }} <span class='red' > ${VacationHours} </span>{{/if}}"}],
        features: [{
            pageSize: 10,
            name: 'Paging',
            type: 'local'},
        {
            name: 'Sorting',
            type: 'local'},
        {
            name: 'Filtering',
            type: 'local'},
        {
            name: 'GroupBy',
            type: 'local'}
                       ...