Hey guys,

I am unable to get LoadOnDemand working properly for the igTree.  I'm sure it's just that I'm calling it incorrectly, sor maybe my data format is being returned incorrectly from the server.  Here are some things that I have tried:

1. When I set the DataSourceUrl property (and leave DataSource blank), my service code gets called, but no nodes render on the tree.  

function loadTreeByUrl() {
var treeServiceString = "http://localhost/igTreePOC/Services/treeService?$format=json&$callback=?";

//var json = new $.ig.JSONDataSource({ dataSource: treeServiceString, responseDataKey: "d" });

$("#treeTargetU").igTree({
dataSourceUrl: treeServiceString,
//dataSource: json,
dataSourceType: "json",
responseDataKey: "d",
responseDataType: "json",
initialExpandDepth: 1,
loadOnDemand: true,
width: 500,
bindings: {
textKey: 'DisplayString',
valueKey: 'TreeNodeString',
primaryKey: 'TreeNodeString',
childDataProperty: 'TreeNodeList',
bindings: {
textKey: 'DisplayString',
valueKey: 'TreeNodeString',
primaryKey: 'TreeNodeString',
childDataProperty: 'TreeNodeList'
}
}
});
}

2. When I set the DataSource property (and leave the DataSourceUrl blank), my service code gets called, the root level nodes get rendered, but when trying to expand any of the root-level nodes, I get the following error, and my service code does NOT get called:

JavaScript runtime error: The igTree control requires a dataSourceUrl provided in order to initiate a request for data to that URL.

function loadTreeByDataSource() {
var treeServiceString = "http://localhost/igTreePOC/Services/treeService?$format=json&$callback=?";

var json = new $.ig.JSONDataSource({ dataSource: treeServiceString, responseDataKey: "d" });

$("#treeTargetD").igTree({
//dataSourceUrl: treeServiceString,
dataSource: json,
dataSourceType: "json",
//responseDataKey: "d",
responseDataType: "json",
initialExpandDepth: 1,
loadOnDemand: true,
width: 500,
bindings: {
textKey: 'DisplayString',
valueKey: 'TreeNodeString',
primaryKey: 'TreeNodeString',
childDataProperty: 'TreeNodeList',
bindings: {
textKey: 'DisplayString',
valueKey: 'TreeNodeString',
primaryKey: 'TreeNodeString',
childDataProperty: 'TreeNodeList'
}
}
});
}

3. When I set the DataSourceUrl AND DataSource properties, my service code gets called, the root level gets populated corrrectly, and my service code gets called when I try to expand one of the root nodes.  However, when the call comes back, no child nodes get populated.

function loadTreeByBoth() {
var treeServiceString = "http://localhost/igTreePOC/Services/treeService?$format=json&$callback=?";

var json = new $.ig.JSONDataSource({ dataSource: treeServiceString, responseDataKey: "d" });

$("#treeTargetBoth").igTree({
dataSourceUrl: treeServiceString,
dataSource: json,
dataSourceType: "json",
responseDataKey: "d",
responseDataType: "json",
initialExpandDepth: 1,
loadOnDemand: true,
width: 500,
bindings: {
textKey: 'DisplayString',
valueKey: 'TreeNodeString',
primaryKey: 'TreeNodeString',
childDataProperty: 'TreeNodeList',
bindings: {
textKey: 'DisplayString',
valueKey: 'TreeNodeString',
primaryKey: 'TreeNodeString',
childDataProperty: 'TreeNodeList'
}
}
});
}

The JSON strings that I am passing back from the server are:

private const string RESULTS_ROOT = "{\"d\":[{\"DisplayString\":\"Wheat\",\"TreeNodeString\":\"3?1001-0=\",\"TreeNodeList\":[]},{\"DisplayString\":\"Barley\",\"TreeNodeString\":\"3?1002-0=\",\"TreeNodeList\":[]},{\"DisplayString\":\"Beans\",\"TreeNodeString\":\"3?1003-0=\",\"TreeNodeList\":[]}]}";
private const string RESULTS_WHEAT = "{\"d\":[{\"DisplayString\":\"Wheat-CPSR\",\"TreeNodeString\":\"3?1001-0=9\",\"TreeNodeList\":[]},{\"DisplayString\":\"Wheat-CWAD\",\"TreeNodeString\":\"3?1001-0=4\",\"TreeNodeList\":[]},{\"DisplayString\":\"Wheat-CWES\",\"TreeNodeString\":\"3?1001-0=7\",\"TreeNodeList\":[]},{\"DisplayString\":\"Wheat-CWGP\",\"TreeNodeString\":\"3?1001-0=8\",\"TreeNodeList\":[]},{\"DisplayString\":\"Wheat-CWHWS\",\"TreeNodeString\":\"3?1001-0=3\",\"TreeNodeList\":[]},{\"DisplayString\":\"Wheat-CWRS\",\"TreeNodeString\":\"3?1001-0=2\",\"TreeNodeList\":[]},{\"DisplayString\":\"Wheat-CWRW\",\"TreeNodeString\":\"3?1001-0=5\",\"TreeNodeList\":[]},{\"DisplayString\":\"Wheat-CWSWS\",\"TreeNodeString\":\"3?1001-0=6\",\"TreeNodeList\":[]}]}";
private const string RESULTS_BARLEY = "{\"d\":[{\"DisplayString\":\"Barley-Feed CW Hulled\",\"TreeNodeString\":\"3?1002-0=70\",\"TreeNodeList\":[]},{\"DisplayString\":\"Barley-Feed CW Hulless\",\"TreeNodeString\":\"3?1002-0=71\",\"TreeNodeList\":[]},{\"DisplayString\":\"Barley-Food CW Hulled\",\"TreeNodeString\":\"3?1002-0=12\",\"TreeNodeList\":[]},{\"DisplayString\":\"Barley-Food CW Hulless\",\"TreeNodeString\":\"3?1002-0=13\",\"TreeNodeList\":[]}]}";
private const string RESULTS_BEANS = "{\"d\":[{\"DisplayString\":\"Beans-Black\",\"TreeNodeString\":\"3?1003-0=17\",\"TreeNodeList\":[]},{\"DisplayString\":\"Beans-Great Northern\",\"TreeNodeString\":\"3?1003-0=19\",\"TreeNodeList\":[]},{\"DisplayString\":\"Beans-Navy\",\"TreeNodeString\":\"3?1003-0=18\",\"TreeNodeList\":[]},{\"DisplayString\":\"Beans-Pinto\",\"TreeNodeString\":\"3?1003-0=16\",\"TreeNodeList\":[]},{\"DisplayString\":\"Beans-Shiny Black\",\"TreeNodeString\":\"3?1003-0=21\",\"TreeNodeList\":[]},{\"DisplayString\":\"Beans-Small Red\",\"TreeNodeString\":\"3?1003-0=20\",\"TreeNodeList\":[]},{\"DisplayString\":\"Beans-Yellow\",\"TreeNodeString\":\"3?1003-0=22\",\"TreeNodeList\":[]}]}";

I have attached a sample project, that attempts to bind 3 different trees using each of the methods described above.  It's using a fresh download (from Sep 15, 2015) of the igniteUI 2015.1 toolset.  (My target code base is on 2014.2, and I get the same problem there too, but if we can only get it running on 2015.1, I'm willing to upgrade.)  Also, I do have quite a bit of control over how the JSON strings get rendered to the client, so if the problem is the format of the JSON, I can work with that too.  Unfortunately, the project isn't an MVC project, so I don't know if I'd be able to implement an MVC solution.

If anyone has any ideas, they'd be greatly appreciated!

Thanks!

Jamie Foster

I DO need to use load-on-demand for this tree.  The nodes are generated dynamically, there are potentially tens of thousands of them, and unknown number of levels deep, and the sql to generate them can be quite slow.