Tree custom load on demand checkboxes

Using 'triState' mode to propagate parent check state to new children, loaded from an oData service.

by damyanpetev

HTML

<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<div id="log" style="height: 80px; background: #eee; overflow-y:scroll;"></div>
<ul id="tree"></ul>

JavaScript

$(function () {
    var $tree = $('#tree').igTree({
        dataSourceUrl: "http://services.odata.org/V2/OData/OData.svc/Categories?$format=json"
        + "&$callback=?", //tell oData to wrap for JSONP
        responseDataKey: "d",
        responseDataType: "jsonp",
        loadOnDemand: true,
        checkboxMode : "triState",
        bindings: {
            textKey: 'Name',
            valueKey: 'ID',
            primaryKey: 'ID',
            childDataProperty: 'Products',
            bindings: {
                textKey: 'Name',
                valueKey: 'ID',
                primaryKey: 'ID',
                childDataProperty: 'Supplier',
                bindings: {
                    textKey: 'Name',
                    valueKey: 'ID'
                }
            }
        },
        nodeCheckstateChanged: function(evt, ui) {
            // log events:
            var message = "Checked-" +ui.newState +" at path: " + ui.node.path + "; name: ";
            message += ui.node.data.Name;
            log(message);
        },
        loadOnDemand : true
    });
    
    function log(msg) {
        $("#log").prepend(msg + "<br>");
    }
});