Unbound Columns - Edit + Hierarchy 2

by damyanpetev

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>
<div id="grid"></div>
<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>



<!-- Unrelated content -->
<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 --- */

.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: "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:...