Ignite UI jQuery Hierarchical Grid Multi-Column Headers

A very basic setup of Ignite UI Grid's Column Moving CTP feature. Multi-Column headers and Immediate move mode in addition to using Column Moving events to apply highlight colors to the column being dragged for better visibility.

HTML

<script src="http://cdn-na.infragistics.com/jquery/20122/latest/js/infragistics.loader.js"></script>
<h1 class='logo'>Hierarchical Grid Multi-Column Headers</h1>

<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

.ui-iggrid th.ui-iggrid-multiheader-cell {
	border-bottom-color: #2cbdf9;
	border-bottom-width: 1px;
}
/* --- 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", Verdana, Helvetica, Sans-Serif;
}
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

//Note - array used for data is 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.MultiColumnHeaders"
});

$.ig.loader(function () {
    $('#grid').igHierarchicalGrid({
        dataSource: departments,
        autoGenerateColumns: false,
        autoGenerateLayouts: false,
        columns: [{
            key: 'DepartmentID',
            dataType: 'number',
            headerText: 'DEP Id',
            template: "Dep id:${DepartmentID}" 
        }, {
            key: 'Dep',
            headerText: 'Dep',
            group: [{
                key: 'Name',
                dataType: 'string',
                headerText: 'Name'
            }, {
                key: 'GroupName',
                dataType: 'string',
                headerText: 'GroupName'
            }]
        }, {
            key: 'ModifiedDate',
            dataType: 'date',
            headerText: 'ModifiedDate'
        }],
        columnLayouts: [{
            autoGenerateColumns: false,
            autoGenerateLayouts: false,
            columns: [{
                key: 'BusinessEntityID',
                dataType: 'number',
                headerText: 'B.E. Id',
                 template: "BusinessEntityID id:${BusinessEntityID}" 
            }, {
                headerText: 'Person',
                group: [{
                    key: 'Personal',
                    headerText: 'Personal',
                    group: [{
                        key: 'LoginID',
                        dataType: 'string',
                        headerText: 'Login ID'
                    }, {
                        key: 'NationalIDNumber',
                        dataType: 'string',
                        headerText: 'National ID Num'
                    }, {
                        key: 'Gender',
                        dataType: 'string',
                       ...