Tree load on demand checkboxes
The state of the parent checkbox is propagated down for new children when using the 'triState' mode only.
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({
dataSource : [{
"CategoryName" : "Beverages",
"ID" : 1,
"Products" : {}
}, {
"CategoryName" : "Condiments",
"ID" : 2,
"Products" : {}
}, {
"CategoryName" : "Confections",
"ID" : 3,
"Products" : {}
}, {
"CategoryName" : "Dairy Products",
"ID" : 4,
"Products" : {}
}, {
"CategoryName" : "Grains/Cereals",
"ID" : 5,
"Products" : {}
}, {
"CategoryName" : "Meat/Poultry",
"ID" : 6,
"Products" : {}
}, {
"CategoryName" : "Produce",
"ID" : 7,
"Products" : {}
}, {
"CategoryName" : "Seafood",
"ID" : 8,
"Products" : {}
}
],
checkboxMode : "triState",
bindings : {
textKey : 'CategoryName',
primaryKey : 'ID',
valueKey : 'ID',
childDataProperty : 'Products',
bindings : {
textKey : 'ProductName',
primaryKey : 'ID',
valueKey : 'ID'
}
},
nodeCheckstateChanged: function(evt, ui) {
// log events:
var message = "Checked-" +ui.newState +" at path: " + ui.node.path + "; name: ";
message += ui.node.data.CategoryName || ui.node.data.ProductName;
log(message);
},
loadOnDemand : true,
dataSourceUrl : 'http://igniteui.com/aspnet/tree/tree-data-on-demand'
});
function log(msg) {
$("#log").prepend("<p>" + msg + "</p>");
}
$("#tree").igTree("checkBoxStateChanging", "testCheckbox");
function testCheckbox(evt, ui) {
alert(ui.rowKey);
console.log(ui.rowKey);
}
});