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>
<button onclick="$('#grid').igGrid('setUnboundValues', [ 'John Doe(1)' , 'John Doe(2)' , 'Jane Doe(1)', 'John Doe(3)'], 'name')"> Set Unbound values </button>
<table id='grid'></table>

<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

/* --- 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 1;
};
//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',
          
                formula:calcTotal
            }, {
                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
            }
        ],
        features : [{
                pageSize : 10,
                name : 'Paging',
                type : 'local'
            }, {
                name : 'Sorting',
                type : 'local'
            }, {
                name : 'Filtering',
                type : 'local'
            }, {
                name : 'GroupBy',
                type : 'local'
            }
        ],
        height : '600px',
        dataSource : employees,
        rendered: function (evt, ui){
           ...