Using XmlStore with Tree

I haven’t seen any examples online of using XMLStore as the data backend for a Tree widget. With the help of dmachi I got it working this afternoon. He may get an example put together for dojocampus in the near future but until then I wanted to get something online for other people to reference if they are trying to do the same thing.

 

Things to note…

1.       When you define the XmlStore, you set the label to whatever XML element that contains the text that you want to appear in the tree. In this example the label is set to “description”. So any text in the <description> element will appear in the tree. It can be retrieved with XmlStore.getLabel().

2.       All other XML elements are retrieved using XmlStore.getValue().

 

XML FILE

<?xml version="1.0" encoding="utf-8"?>

<root>

<node1>

    <description>Node 1 Description</description>

    <node2>

        <heading>1</heading>

        <description>Node 2 Description</description>

        <node3>

            <heading>1.1</heading>

            <description>Node 3 Description</description>

            <node4>

                <heading>1.1.a</heading>

                <description>Node 4 Description</description>

            </node4>

            <node4>

                <heading>1.1.b</heading>

                <description>Node 4 Description</description>

            </node4>

        </node3>

    </node2>

</node1>

</root>

 

JAVASCRIPT

var store = new dojox.data.XmlStore({url: "xml_file.xml", label: "description"});

var model = new dijit.tree.TreeStoreModel(

{

    store: store,

    rootId: "root",

    rootLabel: "root",

    childrenAttrs: ["node2", "node3", "node4"]

});

var tree = new dijit.Tree({model: model});

     

dojo.connect(tree, "onClick", function(item)

{

    console.log(store.getValue(item, “heading”) + “  “ + store.getLabel(item));

});

 

dijit.byId("TreePane").attr("content", tree.domNode); // FYI: TreePane is the id for a ContentPane.