Unbound Columns - Edit + Hierarchy 1

HTML

<script src="http://cdn-na.infragistics.com/jquery/20122/latest/js/infragistics.loader.js"></script>
<h1 class='logo'>Grid Unbound Columns and Updating</h1>
<table id="grid"></table>
<button onclick="$('#grid').data('igGrid').setUnboundValues(['Ken Sánchez', 'John Doe'], 'name')"> Set Unbound names </button>
<button onclick="$('#grid').data('igGridUpdating').setCellValue(2, 'name', 'John Doe')"> Update names [cell]</button>

<br />
<button onclick="$('#log').prepend('<p>Transactions: ' + $('#grid').data('igGrid').dataSource.transactionsAsString() + '</p>')"> Show Transactions</button>
<button onclick="$('#grid').data('igGrid').rollback()"> Rollback all Transactions</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;
};
//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.Updating",
    theme: 'metro'
});

$.ig.loader(function() {

    /*  ------ GRID --------*/
    $('#grid').igGrid({
        updateUrl: '/Home/UpdateUrl',
        autoGenerateColumns: false,
        autoGenerateLayouts: false,
        primaryKey: "BusinessEntityID",
        columns: [{
            key: 'BusinessEntityID',
            dataType: 'number',
            headerText: 'B.E. Id'},
        {
        	  edittype: 'checkbox',
            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: '<span {{if parseInt(${total})/100 > 1 }} class=\'red\' {{/if}}> ${total} / 100 </span>'}
                                ],
        features: [{
            name: 'Paging',
            type: 'local',
            pageSize: 10},
        {
            name: 'Sorting',
            type: 'local'},
        {
            name: 'Filtering',
            type: 'local'},
        {
            name: 'Updating',
            enableAddRow: false,
            columnSettings: [{
                columnKey: 'total',
                readOnly: true},
            {
                columnKey:...