I'm facing some difficulties when trying to populate a kendo treeview
with JSON data. My kendo treeview
only displays the root elements and not it's children.
In short I have the following in js:
var featuremodel = getMetaContentByName("filterJson");
var featuremodeljson = jQuery.parseJSON(featuremodel);
console.log(featuremodeljson);
var local = new kendo.data.HierarchicalDataSource({
data: featuremodeljson,
schema:{
model: {
id: "id",
children: "items"
}
}
});
$("#treeview").kendoTreeView({
dataSource: featuremodeljson,
dataTextField: "FullName",
checkboxes: true,
checkboxes: {
checkChildren: true
},
loadOnDemand: false,
});
I can see in the console,
console.log(featuremodeljson)
that this is a valid Json. I can see the element hierarchy. However, the kendo view only populates the elements in the first hierarchy level - and not their children.
The Json is something like this:
[{
"id": "No Feature",
"FullName": "No Feature",
"expanded": "true",
"hasChildren": "true",
"items": [ {
"id": "Feature0",
"FullName": "Feature0",
"expanded": "true",
"hasChildren": "true"
}]
},
{
"id": "Sensors",
"FullName": "Sensors",
"expanded": "true",
"hasChildren": "true",
"items": [{
"id": "Feature1",
"FullName": "Feature1",
"expanded": "true",
"hasChildren": "true"
}]
},
{
"id": "Warnings",
"FullName": "Warnings",
"expanded": "true",
"hasChildren": "true",
"items": [ {
"id": "Feature2",
"FullName": "Feature2",
"expanded": "true",
"hasChildren": "true"
}]
},
{
"id": "Languages",
"FullName": "Languages",
"expanded": "true",
"hasChildren": "true",
"items": [ {
"id": "Feature3",
"FullName": "Feature3",
"expanded": "true",
"hasChildren": "true"
}]
}]
Any ideas of what I'm doing wrong? Thanks
I found the problem - The JSON is not correct. Both "expanded" and "hasChildren" require boolean attributes. Hence, the values are not "true"
but true
.
The Json should be something like this:
[{
"id": "No Feature",
"FullName": "No Feature",
"expanded": true,
"hasChildren": true,
"items": [ {
"id": "Feature0",
"FullName": "Feature0",
"expanded": true,
"hasChildren": true
}]
},
{
"id": "Sensors",
"FullName": "Sensors",
"expanded": true,
"hasChildren": true,
"items": [{
"id": "Feature1",
"FullName": "Feature1",
"expanded": true,
"hasChildren": true
}]
}]