Ignite UI Tree Drag & Drop + Updating

HTML

<script src="http://cdn-na.infragistics.com/jquery/20122/latest/js/infragistics.loader.js"></script>
<h1 class='logo'>Ignite UI Tree Drag & Drop demo</h1>
    <p> Drag some nodes around - changes reflect as transactions (you can see below) that can be sent to the server for saving. Use the Undo/Redo and see transactions moving to the Redo stack and back.</p>
<div id="tree"></div>
<button onclick="undo();" > Undo </button>
<button onclick="redo();" > Redo </button>
<button onclick="showTransactions();"> Show Transactions</button>
<button onclick="showRedoStack();"> Show Redo stack</button>
<button onclick="save();"> Save Changes</button>
<div id="log" style="overflow:auto; height:200px; background-color:#f2f2f2; padding:5px"></div>



<!-- 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

//Note - array used for data is below
var redoStack = [],
    indexMap = {};
var igtree, treeDS;

$.ig.loader({
    scriptPath: 'http://cdn-na.infragistics.com/jquery/20122/latest/js',
    cssPath: 'http://cdn-na.infragistics.com/jquery/20122/latest/css',
    theme: 'metro'
});
$.ig.loader('igTree', function() {
    $('#tree').igTree({
        dataSource: northwindCategories,
        dragAndDrop: true,
        dragAndDropSettings: {
            dragAndDropMode: 'default',
            dragStartDelay: 100,
            revert: true,
            customDropValidation: 'customValidation',
            invalidMoveToMarkup: '<div><p><span></span> <strong> Invalid location. </strong></p></div>'
        },
        bindings: {
            primaryKey: 'CategoryID',
            textKey: 'CategoryName',
            valueKey: 'CategoryID',
            childDataProperty: 'Products',
            bindings: {
                textKey: 'ProductName',
                valueKey: 'ProductID',
                primaryKey: 'ProductID'
            }
        }
    });
});

function save() {
    var transLog = $('#tree').igTree('option', 'dataSource').root().allTransactions();
    //normalize transactions
    for (var i = 0; i < transLog.length; i++) {
        if (transLog[i].tdata.path instanceof Array) transLog[i].tdata.path = transLog[i].tdata.path[0];
    }
    //send to server
    $('#tree').igTree('option', 'dataSource').root().saveChanges(); /* since we have no server here...*/
    $('#tree').igTree('option', 'dataSource').root().rollback();
    $('#log').prepend("<p> Changes saved successfully. You can click 'Show transactions' again to see they have all been commited.( Note: this of course doesn't work with just JSFiddle, so try the actual demo instead.</p> ");
}

function showTransactions() {
    $('#log').html("<p> Transactions:</p><p>" + JSON.stringify($("#tree").igTree("transactionLog")) + "</p> ");
}

function showRedoStack() {
    $('#log').html("<p> Redo stack:</p><p>" +...