I'm trying to load a two level structure into a treeview control.
The structure is like a calendar in that there is a date, followed by 1 or more events on that date.
They problem I have is that it displays correctly using a local array, but not when I get the data from an external source. The
two hierarchical definitions follow:
window.calendarData = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: "https://admin.medinet.ca/cgi-non/mmb/json_calendar.cgi",
dataType: "json"
}
},
schema: {
model: {
id: "eventId",
hasChildren: "items",
fields: {
eventId: {
editable: false
},
date: {
editable: true
},
items: {
model: {
id: "eventId",
fields: {
eventId: {
editable:false
},
lastname: {
type: "string",
editable: true
}
}
}
}
}
}
}
});
window.calendarDataLocal = new kendo.data.HierarchicalDataSource({
data: [
{
eventId: 0,
date: '2015-08-01',
items: [
{
eventId: 1,
lastname: "poulin",
},
{
eventId: 2,
lastname: "smith",
}
]
},
{
eventId: 3,
date: '2015-08-02',
items: [
{
eventId: 4,
lastname: "jones"
}
]
}
]
});
I'm pretty sure it has to do with my model definition, so if I'm doing something wrong in there please point me in the right direction. I've tried a number of different approaches but so far no luck.
The result I'm seeing is that the for local array the control works as expected, But the remote dataSource shows only the top level nodes and undefined for the lower level nodes.
Here is the div for displaying it.
<div id="mainCalendar">
</div>
<script>
$(document).ready(function () {
$("#mainCalendar").kendoTreeView({
dataSource: window.calendarData,
dataTextField: ["date", "lastname"]
})
});
</script>
Note that the dataTextField uses different name for each level.
Here is a copy of the data as returned from the remote source.
[{
"date":"2015-08-11",
"eventId":0,
"items":[{
"firstname":"Fred",
"stopTime":"11:00",
"startTime":"10:30",
"lastname":"Flintstone",
"type":"paid",
"eventId":1
},
{
"stopTime":"12:44",
"actvity":"lunch",
"startTime":"12:00",
"type":"unpaid",
"eventId":1
}]
},
{"date":"2015-08-12",
"eventId":3,
"items":[{
"firstname":"Kermit",
"lastname":"Frog",
"type":"paid",
"eventId":4
}]
}]
Any help would be appreciated.
3 Answers, 1 is accepted
Hello Doug,
I noticed that schema.model.hasChildren is set to the field that contains the child items. It actually expects a Boolean value indicating whether there are any child items in order to show an expand icon.
When the TreeView is bound to remote data initially it loads only the root nodes from the server. When a node is expanded it makes another request to the server to load its child items and so on.
Please refer to the TreeView / Binding to remote data demo.
Regards,Boyan Dimitrov
Telerik
Rank 1
I must admit that the multiple requests was not obvious to me. It's a bit harder since I can't use the Telerik cloud platform for my data source (confidentiality and legal reasons).
So I see now on my server the new request for the branch items on the tree. What is still confusing is how to define a different schema for the second level items, since they are not the same as the top level items.
The demo is not very helpful since it only deals with a single level tree with only one kind of data.
Do I define two different models in the schema? Do they sit at the same level, or as a subset like I've done?
Also what is the format of the json data being sent back from the server for the second level node. The top level node still works properly. Should I include the top level data element or just the items for this branch (which is what I'm currently doing).
As of now I get and respond to the multiple requests, but the tree doesn't display any of the data for the lower nodes, so it's not understanding my response. So either the response if flawed or the schema is not correct. Here is how they look at the moment.
window.calendarData = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: "https://admin.medinet.ca/cgi-non/mmb/json_calendar.cgi",
dataType: "json"
}
},
schema: {
data: "events",
dataType: "json",
model: {
id: "eventId",
hasChildren: "has_items",
fields: {
eventId: {
editable: false
},
date: {
editable: true
},
items: {
model: {
id: "eventId",
fields: {
eventId: {
editable: false
},
type: {
type: "string",
editable: false
},
lastname: {
type: "string",
editable: true
}
}
}
}
}
}
}
});
The string I'm returning from the server for the top level node looks like this.
{"events":
[{"has_items":"true",
"date":"2015-08-11",
"eventId":0},
{"has_items":"true",
"date":"2015-08-12",
"eventId":3}],
"state":"SUCCESS"}
The string I'm returning from the server for the second level nodes looks like this.
{"items":
[{"firstname":"Fred",
"stopTime":"11:00",
"startTime":"10:30",
"lastname":"Flintstone",
"type":"paid",
"eventId":1},
{"stopTime":"12:44",
"actvity":"lunch",
"startTime":"12:00",
"type":"unpaid",
"eventId":2}],
"state":"SUCCESS"}
This is probably the most complicated part of what I'm trying to accomplish. If we can get this fixed, I can get on with the rest of my project without much more help (I hope).
Please provide a sample (or fix the one I've created) so that it is formatted correctly.
Hello Doug,
My suggestion is to review the Overview article of the Kendo UI HierarchicalDataSource. It shows what data should be returned when child data is requested. The article does have a sample code that shows how to define a different data source for the child items.
Regards,
Boyan Dimitrov
Telerik