Binding to remote data with treeview?

[David]

Hi, I’ve been fighting this for a couple days so I thought I’d try to put the question out there. It kind of relates to a different earlier post but this is for remote data.  I’m using JQuery 1.8.2, kendoui.web.2012.3.1114 on IE9.

1.)     I’m trying to duplicate http://demos.kendoui.com/web/treeview/remote-data.html but I don’t understand how this works and populates on demand.  I’m trying to duplicate this with a WCF JSON response.   The only difference is that I’m not using JSONP since my service is local.  My WCF service returns the following.
 
d: "[{"FolderId":1,"FolderName":"Manufacturing","ParentFolderId":0,"UserId":30,"HasChildren":true}]"

 2.)    I’m testing getting the remote data 3 different ways below.  It binds to each treeview because it renders “Manufacturing” but the “HasChildren:true” doesn’t seem to have any effect on showing the arrow to expand.  Plus how would I populate on demand like #1 above?
 
3.)    What benefit does the transport object have over calling the $.ajax() method?

 My goal is to understand these enough so I can bind on demand OR load the entire treeview at once. 

//*-------------------------------------------------------------------------------                
//  Remote HierarchicalDataSource demo using transport/parse
//*-------------------------------------------------------------------------------               

 var homogeneous = new kendo.data.HierarchicalDataSource({
 transport: {
 read: {
 url: "/Secure/WCF/MyService.svc/GetFolderList",
 dataType: "json",
 data: {
   UserId: 30,
   FolderId: 1
  }
}
 },
schema: {
 model: {
  id: "FolderId",
  hasChildren: "HasChildren"
},
 parse: function(data){
  return preprocessData(data);
}
});

function preprocessData(data) {
 $("#treeviewTransportRemoteData").data("kendoTreeView").setDataSource(JSON.parse(data.d));
}

 $("#treeviewTransportRemoteData").kendoTreeView({
     dataSource: homogeneous,
    dataTextField: "FolderName"
}).data("kendoTreeView");

//*----------------------------------------------------------------------------
//  Remote data using JQuery Ajax method to populate remote data  
//*------------------------------------------------------------------------------                 

var params = new Object();
params.UserId = 30; 
params.FolderId = 1;             

 var jsonData = $.param(params);  
$.ajax({
  type: "GET",
  url: "/Secure/WCF/MyService.svc/GetFolderList",
  data: jsonData,
  contentType: "application/json; charset=utf-8",
  dataType: "json",
success: function (msg) {
  $("#treeviewRemoteDataJQueryAjax").data("kendoTreeView").setDataSource(JSON.parse(msg.d));
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
  alert(textStatus);
  }
  });
});

 $("#treeviewRemoteDataJQueryAjax").kendoTreeView({
dataTextField: "FolderName"
}).data("kendoTreeView");

 //*-------------------------------------------------------------------------------
//  Remote data using JQuery Ajax inside transport read.
//*-------------------------------------------------------------------------------

 var hds =  new kendo.data.HierarchicalDataSource({

 transport: {
  read: function(options) {
    var params = new Object();
    params.UserId = 30; 
    params.FolderId = 1;
    var jsonData = $.param(params);                          

         $.ajax({
    type: "GET",
    url: "/Secure/WCF/MyService.svc/GetFolderList",
    data: jsonData,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (msg) {
      $("#treeviewTransportJQueryAjax").data("kendoTreeView").setDataSource(JSON.parse(msg.d));
     },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
     alert(textStatus);
    }
   });
 }
},
 schema: {
   model: {
     id: "FolderId",
     hasChildren: "HasChildren"
   }
}

 });

 $("#treeviewTransportJQueryAjax").kendoTreeView({
 dataSource: hds,
 dataTextField: "FolderName"}).data("kendoTreeView");

[David]

Here's some things I found to make my calls work for the 3 examples respectively

1.) Changed the "preprocessData" method to:

function preprocessData(data) {
    return $.parseJSON(data.d);
}

2.) Change the success method as follows
....
 success: function (msg) {
                          
     var folders = $.parseJSON(msg.d);

     var hds = new kendo.data.HierarchicalDataSource({
     data : folders,
     schema: {
          model: {
          id: "FolderId",
          hasChildren: "HasChildren"
          }
       }
    });

   $("#treeviewRemoteDataJQueryAjax").data("kendoTreeView").setDataSource(hds);
 }
.....

3.) Changed ajax success method to:
...
success: function (msg) {
     options.success($.parseJSON(msg.d));
},
...

[Princess]

Have you encountered error like this?

$(...).data(...).setDataSource is not a function

[David]

Hi, I can't recall since I've given up on Kendo UI a couple weeks ago and switched to the Telerik ASP.NET Treeview since I'm using ASP.NET.

Do you have the entire source or has any data binding worked yet?