Unbound Columns - Edit + Hierarchy 2

HTML

<script src="http://cdn-na.infragistics.com/jquery/20122/latest/js/infragistics.loader.js"></script>
<h1 class='logo'>Grid Unbound Columns and Hierarchy</h1>
<table id="grid"></table>
<button onclick="$('#grid').igGrid('setUnboundValues', [ 1, 2, 3, 4], 'employees')"> Set Employees Unbound values </button>
<button onclick="$.each($('#grid').data('igHierarchicalGrid').allChildrenWidgets(), function(i, grid) {
        grid.setUnboundValues([12.2, 12.2, 12.2, 12.2], 'counter');
    });"> Set Unbound values to child layouts[12.2]</button>
<br>
<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 --- */


button:hover
{
     background-color:red;
}
button:active
{
     background-color: red;
}

JavaScript

//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: "igHierarchicalGrid",
    theme: 'metro'
});

$.ig.loader(function() {

    /*  ------ GRID --------*/
    $('#grid').igHierarchicalGrid({
        dataSource: departments,
        dataSourceType: 'json',
        autoGenerateColumns: false,
        autoGenerateLayouts: false,
        columns: [{
            key: 'DepartmentID',
            headerText: 'DEP Id',
            dataType: 'number'},
        {
            key: 'Name',
            headerText: 'Name',
            dataType: 'string'},
        {
            key: 'GroupName',
            headerText: 'Group Name',
            dataType: 'string'},
        {
            key: 'ModifiedDate',
            headerText: 'Modified Date',
            dataType: 'date'},
        {
            unbound: true,
            key: 'employees',
            headerText: 'Employees',
            dataType: 'number',
            unboundValues: [7, 3, 18, 9, 12, 4, 180, 5, 6]}
                    ],
        columnLayouts: [{
            autoGenerateColumns: false,
            autoGenerateLayouts: false,
            mergeUnboundColumns: true,
            columns: [{
                key: 'BusinessEntityID',
                headerText: 'B.E. Id',
                dataType: 'number'},
            {
                key: 'DepartmentID',
                headerText: 'Dep id',
                dataType: 'number',
                hidden: true},
            {
                key: 'VacationHours',
                headerText: 'Vacation Hours',
                dataType: 'number'},
            {
                key: 'SickLeaveHours',
                headerText: 'Sick Leave Hours',
                dataType: 'number'},
            {
                unbound: true,
                key: 'counter',
                headerText: 'Counter',
            ...