Login Register

A Simple Tree

To start, here's a one level tree. We split the tree data off into a separate file, poptarts.txt, in JSON format. You will need to download this and save it in the same directory as the example HTML below:

{ label: 'name',
  identifier: 'name',
  items: [
     { name:'Fruit', type:'category'},
     { name:'Cinammon', type: 'category'},
     { name:'Chocolate', type: 'category'}
  ]
}

Then here's the HTML that draws the actual tree:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
        @import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
        @import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css";
    </style>
    <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
            djConfig="parseOnLoad: true">
</script>
    <script>
        dojo.require("dojo.data.ItemFileReadStore");
        dojo.require("dijit.Tree");
        dojo.require("dojo.parser");
   </script>
</head>
<body class="tundra">
        <div dojoType="dojo.data.ItemFileReadStore"
             url="poptarts.txt" jsid="popStore" />

        <div dojoType="dijit.Tree" store="popStore" labelAttr="name" label="Pop Tarts"></div>
</body>
</html>

This is a good start, but there's a lot more you can do with Tree. Read on!

AttachmentSize
poptarts.txt180 bytes

Uniqueness of data

It should be noted that tree data elements from an ItemFileReadStore need to be unique, or the tree will not render.

I think the Tree should

I think the Tree should rather depend on the uniqueness of the identifier attribute rather than the value to be displayed in the tree. Is this a bug or feature?

I think it does what you are inquiring...

I think the following is what you are looking for; this works...

{ label: 'name',
  identifier: 'id',
  items: [
     { id:'1', name:'Fruit', type:'category'},
     { id:'2', name:'Cinammon', type: 'category'},
     { id:'3', name:'Chocolate', type: 'category'},
     { id:'4', name:'Fruit', type:'category'}
  ]
}

The 'label' denotes the display field, which is NOT required to be unique (see 'Fruit' doubled-up?), and the 'identifier' denotes the field that should be the unique key...

Is that what you were looking for?