This is a migrated thread and some comments may be shown as answers.

Binding to remote data with treeview?

3 Answers 513 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 15 Nov 2012, 02:59 AM

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) {
    v
ar 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");

3 Answers, 1 is accepted

Sort by
0
David
Top achievements
Rank 1
answered on 16 Nov 2012, 02:49 PM

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));
},
...

0
Accepted
Princess
Top achievements
Rank 1
answered on 12 Dec 2012, 05:38 AM
Have you encountered error like this?
$(...).data(...).setDataSource is not a function
0
David
Top achievements
Rank 1
answered on 12 Dec 2012, 01:24 PM
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?
Tags
TreeView
Asked by
David
Top achievements
Rank 1
Answers by
David
Top achievements
Rank 1
Princess
Top achievements
Rank 1
Share this question
or