Mapping XML child elements to a Kendo UI DataSource - kendo-ui

Question

I'm struggling with mapping and displaying a list of child elements on a XML datasource, using Kendo UI Mobile.
Consider the following straightforward XML structure:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<topics>
<topic id="1" title="Weather">
<header>Great weather today!</header>
<smallicon>foo_bar.png</smallicon>
<items>
<item>It's great weather</item>
<item>Sunny feeling</item>
<item>Raining like a dog</item>
</items>
</topic>
<topic id="2" title="Politics">
<header>Left or right, take your pick!</header>
<smallicon>whatever.png</smallicon>
<items>
<item>Making budget cuts</item>
<item>How important is healthcare?</item>
</items>
</topic>
</topics>
Reading each single topic, and binding it to a view template, is in fact quite easy. Like so:
var template = kendo.template($("#home-tpl").html());
// hook up to the datasource "change" event; for auto-population
dataSource.bind("change", function(e) {
$("#home-menu").html(kendo.render(template, this.view()));
});
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "topics.xml",
dataType: "xml"
}
},
schema: {
type: "xml",
data: "/topics/topic",
model: {
fields: {
id: "#id",
title: "#title",
header: "header/text()",
smallicon: "smallicon/text()",
// > QUESTION: HOW TO MAP THIS?
items: "???"
}
}
}
dataSource.read();
This seems to blend just fine for the attributes and elements on the top level. I get a list of topics and I can bind them to a template using something like #: data.title #. This blends and no questions here.
However, I want to map the child elements for each <topic> as well. In the XML example this means the list of <items>. It's the "how-to-map-this-schema" part I'm puzzled on.
The eventual goal is to display a list of these sub-items, like for example in: #: data.items[0] #.
Also, I've tried a HierarchicalDataSource, but the regular DataSource seems to work just fine. Perhaps this would be a better fit? The Kendo API documentation doesn't seem to provide XML samples that have a nested hierarchy.
Any suggestions on how I can accomplish this?

Answer 1

After some trial and error I came up with the following solution:
schema: {
type: "xml",
data: "/topics/topic",
model: {
fields: {
id: "#id",
title: "#title",
header: "header/text()",
smallicon: "smallicon/text()",
// > ANWER: THIS IS HOW
children: "items"
},
hasChildren: "items"
}
}
Now there are two changes in this snippet in comparison to my original question:
The children: "items" node is added to the schema
The hasChildren: "items" property
With this in place, everything worked out well and the hierarchical structure was mapped just nicely. As a bonus, I'm now able to do the following:
// fetch the one, single topic from the datasource
topic = dataSource.Topics.get(topicId);
// read the inner contents, e.g. text, from a single <items> node
log(topic.children.item[0]["#text"]);
Perhaps it's of some help to others in the future...