Mapping XML child elements to a Kendo UI DataSource -
i'm struggling mapping , displaying list of child elements on xml datasource, using kendo ui mobile.
consider 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 dog</item> </items> </topic> <topic id="2" title="politics"> <header>left or right, take pick!</header> <smallicon>whatever.png</smallicon> <items> <item>making budget cuts</item> <item>how important healthcare?</item> </items> </topic> </topics>
reading each single topic, , binding view template, in fact quite easy. so:
var template = kendo.template($("#home-tpl").html()); // hook datasource "change" event; 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 map this? items: "???" } } } datasource.read();
this seems blend fine attributes , elements on top level. list of topics , can bind them template using #: data.title #
. blends , no questions here.
however, want map child elements each <topic>
well. in xml example means list of <items>
. it's "how-to-map-this-schema" part i'm puzzled on.
the eventual goal display list of these sub-items, example in: #: data.items[0] #
.
also, i've tried hierarchicaldatasource, regular datasource seems work fine. perhaps better fit? kendo api documentation doesn't seem provide xml samples have nested hierarchy.
any suggestions on how can accomplish this?
after trial , error came following solution:
schema: { type: "xml", data: "/topics/topic", model: { fields: { id: "@id", title: "@title", header: "header/text()", smallicon: "smallicon/text()", // > anwer: how children: "items" }, haschildren: "items" } }
now there 2 changes in snippet in comparison original question:
- the children: "items" node added schema
- the haschildren: "items" property
with in place, worked out , hierarchical structure mapped nicely. bonus, i'm able following:
// fetch one, single topic datasource topic = datasource.topics.get(topicid); // read inner contents, e.g. text, single <items> node log(topic.children.item[0]["#text"]);
perhaps it's of others in future...
Comments
Post a Comment