I am trying to put together a page using HTML5/Kendo UI, and have a treeview defined. I actually had this working with a call to a data page, but now have added a WFC service to provide the data. The DATA appears to be making it to the page, as evidenced by the data showing up in the console (see initializeTreeView method below). HOWEVER...the treeview never shows up. I THINK it is something to do with the binding or definition of the datasource, but so far 1 and 1/2 days of research and trying different things has not gotten me anywhere...I am hoping someone here can spot my problem.
THE HTML: <
div
id
=
"treeviewLeft"
></
div
>
THE CONTROLLER CODE:
// Get Treeview data from database; ABL & nonABL
var mySpecSheetData = new SpecSheetData();
mySpecSheetData.GetTreeviewNodes('170', successFunction, failureFunction);
function successFunction()
{
$('#loadingIndicator').remove();
intializeTreeView();
}
function failureFunction()
{
console.log("********** ERROR **********");
}
function intializeTreeView()
{
var specData = new kendo.data.HierarchicalDataSource();
specData = mySpecSheetData.GetTreeviewData();
console.log(JSON.stringify(specData, null, 1));
alert("Get TreeviewNodeData Success!");
var treeView = $("#treeviewLeft").kendoTreeView({
autoBind: false,
expanded: true,
datasource: specData,
dataTextField: 'displayName'
}).data("kendoTreeView");
}
THE MODEL CODE:
function SpecSheetData() {
var treeNodes = [];
}
SpecSheetData.prototype.GetTreeviewNodes = function (repNumber, successFunction, failureFunction) {
var that = this;
$.ajax({
//Call for data goes here
type: 'GET',
url: 'SGLibraryDataService.svc/GetTreeviewDataByRepNum',
data: { RepNumber: repNumber },
dataType: 'json',
async: true,
success: function (returnedTreeNodeData) {
that.treeNodes = returnedTreeNodeData;
successFunction();
},
failure: function (e) {
failureFunction();
}
});
}
SpecSheetData.prototype.GetTreeviewData = function ()
{
return this.treeNodes;
}