Ignite UI jQuery 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'>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:nth-child(even) {
    border-bottom-color: #2cbdf9;
    border-bottom-width: 1px;
}

.ui-iggrid th.ui-iggrid-multiheader-cell:nth-child(odd) {
    border-bottom-color: #ff9001;
    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"
});

$.ig.loader("igGrid.MultiColumnHeaders.ColumnMoving.Filtering.Hiding.Resizing", function () {
    $("#grid").igGrid({
        dataSource: people,
        autoGenerateColumns : false,
		autoGenerateLayouts : false,
		columns : [{
				key : 'BusinessEntityID',
				dataType : 'number',
				headerText : 'Id',
				width : '100'
			}, {
				headerText : 'Person',
				group : [{
						key : 'nameInfo',
						headerText : 'Name Information',
						group : [{
								unbound : true,
								key : 'name',
								dataType : 'string',
								headerText : 'Full Name',
								template : '${FirstName} ${LastName}',
								width : '200'
							}, {
								key : 'FirstName',
								dataType : 'string',
								headerText : 'First name',
								width : '150'
							}, {
								key : 'LastName',
								dataType : 'string',
								headerText : 'Last Name',
								width : '150'
							}
						]
					}, {
						key : 'Stats',
						headerText : 'Stats',
						group : [{
								key : 'PersonType',
								dataType : 'string',
								headerText : 'PersonType',
								width : '100'
							}, {
								key : 'NameStyle',
								dataType : 'bool',
								headerText : 'Name Style',
								width : '150'
							}, {
								key : 'Title',
								dataType : 'string',
								headerText : 'Title',
								width : '50'
							}
						]
					}, {
						key : 'addInformation',
						headerText : 'Additional Information',
						group : [{
								key : 'AdditionalContactInfo',
								dataType : 'string',
								headerText : 'Additional Contact Info',
								width : '100'
							}, {
								key : 'Demographics',
								dataType : 'string',
								headerText : 'Demographics',
								width : '120'
							}
						]
					}
				]
			}, {
				key : 'recordInfo',
				headerText :...