Ignite UI Tree Drag & Drop + LoD

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> Load On Demand data from the <a href='http://www.odata.org/ecosystem#liveservices'>Northwind oData service</a>. Drag some nodes around (event log below) and try the interaction when attempting to drop over a not-yet-loaded node. </p>
    
<div id="tree"></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

/*Icon class for nodes and special visual trick for per-node styling without binding*/
    .parent {
        background: url("http://users.infragistics.com/dpetev/icons.png") no-repeat;
        display: inline-block;
        height: 16px;
        width: 16px;
         background-position:0px 0px;
    }
    li[data-path="1"] .parent{
        background-position:-16px 0px;
    }
     li[data-path="2"] .parent{
        background-position:-32px 0px;
    }

/* --- 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

var stateHelper = { dropTarget: null, populatingNode: null, draggedNode: null };
$.ig.loader({
    scriptPath: 'http://cdn-na.infragistics.com/jquery/20122/latest/js/',
    cssPath: 'http://cdn-na.infragistics.com/jquery/20122/latest/css',
    resources: 'igTree',
    theme: 'metro'
});
$.ig.loader('igTree', function() {
    $("#tree").igTree({
        dragAndDrop: true,
        parentNodeImageClass: "parent",
        dragAndDropSettings: {
            dragAndDropMode: "move",
            customDropValidation: function(element) {
                // Validates the drop target:
                // Nodes will properly cause targets to expand (and therefore load)
                // But we must not allow actual drop before the data is loaded 
                // because we have nothing to add this node to.
                stateHelper.dropTarget = $(this);
                stateHelper.draggedNode = $(element);
                var childNodes = stateHelper.dropTarget.closest('li[data-role=node]').children('ul');
                if (childNodes.length > 0 && JSON.parse(childNodes.attr('data-populated')) === false) {
                    return false;
                }

                return true;
            },
            expandDelay: 500
        },
        dragStop: function(evt, ui) {
            stateHelper.dropTarget = undefined;
        },
        nodePopulated: function(evt, ui) {
            if (stateHelper.dropTarget && $.contains(ui.element, stateHelper.dropTarget)) {
                stateHelper.populatingNode = ui.element;
            }
        },
        rendered: function(evt, ui) {
            if (stateHelper.populatingNode) {
                // forse re-handling of the drag in case the user manages to 
                // shomehow keep his mouse steady when the node expands
                // this will evaluate the target again
                stateHelper.populatingNode.children('a').trigger({
                    type: 'mousemove',
                    pageX:...