Unable to add new node to dojo tree dynamically

classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
Report Content as Inappropriate

Unable to add new node to dojo tree dynamically

santosha ramaraju
This post has NOT been accepted by the mailing list yet.
Hi Team,

I am facing issue with below issue

PFB my requirements

1.create a dojo tree and add new element on selected tree element using dojo latest version toolkit(1.11v)
2.The structure of tree is one root element and this elements has children and sub children.
3.The structure used for constructing tree is in json form and format is parent has section reference and this indicates the child node.

Issue: I have created tree and trying to add new element to the selected the new node is getting added into tree store but not in right position even if we try to add
in right position its not reflecting in UI.

PFB my analysis

1.The below links is the sample reference used for adding/dragging and removing the elements on selected tree node


the main difference between the above example and my requirement is json data format.

here there are using the format as children referencing to their parent using parent json attribute

My json data is parent reference their childrens and PFB sample for your references
    "name": "US Government",
    "id": "root",
    "children": [
            "name": "Congress",
            "id": "congress",
          "children": [
            "name": "Congress child",
            "id": "congress child"


            "name": "Executive",
            "id": "exec"
            "name": "Judicial",
            "id": "judicial",
           "children": [
            "name": "Judicial child",
            "id": "Judicial child"


I have try implementing below steps

1. I have created a tree with objectStoreModel and used the sample json as per the 2nd json data format.

2. I have used the observable module for dynamic update and put method for adding the new element into the store object.

I have implemented as above and trying to run it the element in the store but not reflecting in UI dynamically. PFB sample implemented code

<!DOCTYPE html>
<html >

<link rel ="styleSheet" href="dojoScripts/dijit/themes/claro/claro.css"/>
<script type="text/javascript" src="dojoScripts/dojo/dojo.js"> </script>
<body class="claro">
<script> var myStore; var tree; var myModel; require([ "dojo/dom", "dojo/aspect", "dojo/json", "dojo/query", "dojo/on", "dojo/store/Memory", "dojo/store/Observable", "dijit/tree/ObjectStoreModel", "dijit/Tree", "dojo/text!./Test_Tree.json", "dijit/tree/dndSource", "dojo/domReady!" ], function(dom,aspect,json,query,on,Memory,Observable, ObjectStoreModel, Tree,data,dndSource){ myStore = new Memory({ data:[json.parse(data)], getChildren: function(object){ return object.sections || []; } }); aspect.around(myStore, "put", function(originalPut){ return function(obj, options){ if(options && options.sections){ obj.sections = options.sections; } return originalPut.call(myStore,obj); } }); console.log(myStore); myStore = new Observable(myStore); myModel = new ObjectStoreModel({ store: myStore, query: {id:root}, mayHaveChildren: function(item){ return "sections" in item; } }); tree = new Tree({ model: myModel, autoExpand: true, openOnClick :true, dndController: dndSource, persist: false, getTooltip: function (item) { return item.name; } }, "treeOne"); tree.startup(); console.log(tree); query("#addNewElement").on("click", function(){ // get the selected object from the tree var selectedObject = tree.get("selectedItems")[0]; if(!selectedObject){ return alert("No object selected"); } // add a new child item var childNode =[{ "id": :"test", "name":"test" }] myStore.put(selectedObject, { overwrite: true, sections :childNode }); }); }); </script>

 <div id="treeOne"></div>
 <input type="button" value="addElement" id="addNewElement" />

Please kindly help to resolve the above issue.