Opened 6 years ago

Closed 6 years ago

#17497 closed defect (duplicate)

dijit tree issue and drag and drop not working in dojo 1.7.2 version

Reported by: dojo_deb Owned by:
Priority: undecided Milestone: tbd
Component: Dijit Version: 1.7.2
Keywords: Cc:
Blocked By: Blocking:


Hi Dojo team,

I am using dojo 1.7.2 version in my jsp page.

1) I have written a small function in my dojo tree code as attached below to create and add new child folder manually under any folder present in the tree as its parent folder of the tree structure but it is not working. It is opening till the prompt "Folder name", after that when I add the folder name and click on ok, it is not saving in the folder tree structure. Can you suggest where it is going wrong? I am trying to wrap the store(ItemFileWriteStore?) to observable but it is not working.

It is working until alert("I am final"); in myFunction(item) after that the store.put(item) isn't working.Can you suggest what is going wrong here? I have attached the sample code I used along with the ticket .

2) Also the drag and drop feature is not working. It is dragging the folder but not dropping any folder structure. Is the drag and drop not working due to some bug?How can I fix this issue, please help. Appreciate for all your help in this

I am putting the code below since the browse button isn't working:


<!DOCTYPE HTML> <html> <head> <title>Real world applications in dojo, dijit and HTML5: dijit.tree_2b</title> <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>

<script type="text/javascript">

var measurement = function(){}; measurement.startTime = new Date();


<link rel="stylesheet" href=""> <link rel="stylesheet" href=""> <link rel="stylesheet" href=""> <link rel="stylesheet" href="">

<script type="text/javascript">

measurement.cssLoadComplete = new Date(); measurement.cssLoad = measurement.cssLoadComplete - measurement.startTime;


<script src=""

data-dojo-config="isDebug: true,parseOnLoad: true"></script>

<script type="text/javascript">

measurement.dojoLoad = new Date() - measurement.cssLoadComplete;


<link rel="stylesheet" href=" " media="screen">


dojo.require("dojo.parser"); dojo.require("dojo.aspect"); dojo.require("dijit.form.Form"); dojo.require("dijit.form.Select"); dojo.require("dijit.form.TextBox?"); dojo.require("dijit.layout.BorderContainer?"); dojo.require("dijit.layout.AccordionContainer?"); dojo.require("dijit.layout.ContentPane?"); dojo.require("dijit.layout.TabContainer?"); dojo.require(""); dojo.require("dijit.tree.ForestStoreModel?"); dojo.require("dijit.tree.dndSource"); dojo.require("dijit.Tree"); dojo.require("dijit.Menu"); dojo.require("dijit.MenuItem?"); dojo.require("");

dojo.addOnLoad(function() { equal to dojo.ready()

measurement.parseTime = new Date() - measurement.loadComplete;

dojo.byId('measureParse').innerHTML += (measurement.parseTime) +" ms";

dojo.byId('loaderInner').innerHTML += " done."; setTimeout(function hideLoader(){


node: 'loader', duration:500, onEnd: function(n){ = "none";



}, 250);

}); add on load

Declare the dijit tree variables

var store; var selectedItemId = 0; var itemSelected = null; var sel = null; var idCount = 0; var treeModel; var mytree; var modeSelector; var q = null; dojo.require(""); dojo.ready(function(ItemFileWriteStore?,store){

alert("hiiiiiiii ") ; store = new{

target: 'store', url: ""


store.deleteById = function(id){

this.fetchItemByIdentity({identity: id, onItem: function(item){


}}); observe the return values

var q = store.query(); dojo.when(q, gotItems); q.observe(gotItem, true);


treeModel = new dijit.tree.ForestStoreModel?({ Forest

model:continentModel, iconClass: 'dijitEditorIcon dijitEditorIconCut', store: store, query: {"main": 0},

rootId: 0,

rootLabel: "Projects", pasteItem: function(){},

mayHaveChildren : function(item) {

return true;


getChildren: function(parentItem, callback, onError) {

if(parentItem.root == true ){

console.debug("Root onLoad here!"); if(this.root.children){

console.debug("--already loaded, just return!"); callback(this.root.children);


query: this.query, queryOptions: {cache:false}, onComplete: dojo.hitch(this, function(items){

this.root.children = items; callback(items);

}), onError: onError



} else {

console.debug("Tree child onLoad here: "; console.debug(toString(; idCount

if (idCount < parseInt({

idCount = parseInt(;

} idCount

var sx = parseInt(;{

query: { main: sx }, queryOptions: {cache:false},

onComplete: dojo.hitch(this, function(items) {

alert("Hi The folder is being loaded");

this.root.children = items;

alert("You are right, the folder got loaded"); callback(items);

}), onError: onError



temp dijit.byId("s4").set('value', 'Nodes: '+idCount); } getChildren

}); Tree model

mytree = new dijit.Tree({

model: treeModel, dndController: "dijit.tree.dndSource", openOnClick:true, showRoot: true,

onDblClick: function (item, node, evt){

Callback when a tree node is clicked dojo.byId("ip").innerHTML =;

dojo.byId("astid").value =;

if ( == 0) { Only add is alowed in the root!

modeSelector.removeOption ([{ label: 'Edit project', value: 1 },

{ label: 'Add new project or sub project', value: 2 }]);

modeSelector.set ('options', [{ label: 'Add new project', value: 2 }] ); modeSelector.set('value', 2); addLeaf(); selectedItemId = parseInt(;

} else {

if ( item.main == 0) {

modeSelector.removeOption ([{ value: 0 }, { value: 1 }, { value: 2 }]);

modeSelector.options = [{ label: 'Edit project', value: 1 },

{ label: 'Add new sub project', value: 2 }];

modeSelector.set('value', 1);

} else {

modeSelector.removeOption ([{ value: 0 }, { value: 1 }, { value: 2 }]); modeSelector.options = [{ label: 'Edit sub project', value: 1 },

{ label: 'Add new sub project', value: 2 }];

modeSelector.set('value', 1);

} editLeaf();

selectedItemId = parseInt(; Item id Integer itemSelected = item; Item Object dijit.byId("s1").set('value', item.title); dijit.byId("s2").set('value', item.description);

console.log("Item (dbl): ", item); This gives you the object in your store console.log("Node", node); This gives you the dijit widget object (UI) console.log("Event", evt); This gives you the event object console.log('Identifier: ' + mytree.getLabel(item)); }

}, onDblClick the above events happens onClick: function (item, node, evt){ resetEditor(); }

}, "treeThree");

dojo.extend(dijit.Tree, {

refreshModel: function () {

reset the itemNodes Map this._itemNodesMap = {};

reset the state of the rootNode this.rootNode.state = "UNCHECKED";

Nullify the tree.model's root-children this.model.root.children = null; this.model.root = null;

remove the rootNode if (this.rootNode) {



reload the tree this._load();



modeSelector = new dijit.form.Select ({

options: [{ label: '-- Select any project from the list --', value: '0', selected: true }],

onChange: function(val){

if (val =='1'){


} else {



}, style: 'width:200px; '

}, 'f_2');

sel = new dijit.form.Select({}).placeAt("E_1");

sel.setStore(store,,{query:{main: 0}}); sel.autoWidth = false; = 'width: 150px'; sel.sortByLabel = true; sel.disabled = false; sel.onChange = function(val){ sel2.setStore(store,,{query:{main: val}});


var sel2 = new dijit.form.Select({

name: 'select2', sortByLabel : true


sel2.autoWidth = false; = 'width: 150px';


var collapseAll = function(){

dijit.byId('treeThree').collapseAll(); return this.query({parent: this.getIdentity(object)});


var addLeaf = function(){

dijit.byId("s1").set('value', ); dijit.byId("s2").set('value', );

dijit.byId('bd').set('disabled', true); dijit.byId('bs').set('disabled', true); dijit.byId('ba').set('disabled', false);


var editLeaf = function(){

dijit.byId('bd').set('disabled', false); dijit.byId('bs').set('disabled', false); dijit.byId('ba').set('disabled', true);

}; var resetEditor =function (){

modeSelector.removeOption ([{ label: 'Edit project', value: 1 },

{ label: 'Add new project or sub project', value: 2 }]);

modeSelector.options = [{ label: '-- Select a project --', value: '0', selected: true }]; modeSelector.set('value', 0);

dijit.byId("s1").set('value', ); dijit.byId("s2").set('value', );

dijit.byId('bd').set('disabled', true); dijit.byId('bs').set('disabled', true); dijit.byId('ba').set('disabled', true);



</head> <head> <script> function myFunction(item) { alert('I was clicked: ', item); = prompt("Enter a Folder name"); var childItem = {

name: "New Folder", id: Math.random(), parent:


alert("I am final ");

store.setValue("item ");

alert(; alert(store); store.put(childItem, {overwrite: true});

alert("2"); alert("I am final for you");



</script> </head> <body class="claro"> <body bgcolor="#7FFF00">

<!-- BorderContainer? --> <!-- Folder menu options --> <ul dojoType="dijit.Menu" id="tree_menu" style="display: none;">

<li dojoType="dijit.MenuItem?" onClick="myFunction(item)">Add a new folder</li> <li dojoType="dijit.MenuItem?" disabled="true">Disabled the current menu</li> <li dojoType="dijit.MenuItem?" iconClass="dijitEditorIcon dijitEditorIconCut" onClick="alert('This is a test of the cutting menu!')">Cut the folder</li> <li dojoType="dijit.MenuItem?" iconClass="dijitEditorIcon dijitEditorIconCopy" onClick="alert('This is a test of the copy menu!')">Copy the folder</li> <li dojoType="dijit.MenuItem?" iconClass="dijitEditorIcon dijitEditorIconPaste"

onClick="alert('This is a test of the paste menu!')">Paste the folder</li>


<div data-dojo-type="dijit.layout.ContentPane?" data-dojo-props="title:'NG Tree demo'">

<div data-dojo-type="dijit.layout.ContentPane?"

data-dojo-props="title:'Rootless Tree', style:'width:30%; height:100%; max-width:1050px; min-width:250px; min-height:300px; margin: 0 auto; float:left' "> <div id="treeThree"></div>


<div data-dojo-type="dijit.layout.ContentPane?" data-dojo-props="title:'Rootless CCCCCC'">

<!-- Project selector --> <div id=help">Make edits for tree.</div><br> <select id="f_2"></select>



<table style="width: 135px; height: 83px;">


<div id="ip"/></div>

<div id="ip">Asset ID</div>

<input type="text" id="astid" name="result" text="1" value=""> <br/>

<label for="s1">Asset Name </label>

<input type="text" id="s1" name="result"


data-dojo-id="s1" data-dojo-props="style:'min-width:200px; margin: 0 auto;'">

<label for="s2">Asset Description</label>

<input type="text" id="s2" name="result" data-dojo-type="dijit.form.TextBox?"

data-dojo-id="s2" data-dojo-props="style:'min-width:300px; margin: 0 auto;'">

<label for="s3">From Date: </label>

<input type="text" id="s3" name="result" data-dojo-type="dijit.form.TextBox?"

data-dojo-id="s3" data-dojo-props="style:'min-width:300px; margin: 0 auto;'">

<label for="s4">Nodes Count: </label>

<input type="text" id="s4" name="result" data-dojo-type="dijit.form.TextBox?"

data-dojo-id="s4" data-dojo-props="style:'min-width:300px; margin: 0 auto;'">

<button id="bd" data-dojo-type="dijit.form.Button"

data-dojo-id="bd" data-dojo-props="disabled: true,

onClick: function (evt){

store.deleteById(selectedItemId); resetEditor();


label:'Delete project' ">


<button id="bs" data-dojo-type="dijit.form.Button"

data-dojo-id="bs" data-dojo-props="disabled: true,

onClick: function (evt){

var lvalue = dijit.byId('s1').value; store.setValue(itemSelected, 'title', dijit.byId('s1').value); store.setValue(itemSelected, 'description', dijit.byId('s2').value);;

}, label:'Save project' ">


<button id="ba"data-dojo-type="dijit.form.Button"

data-dojo-id="ba" data-dojo-props="disabled: true,

onClick: function (evt){

idCount = idCount +1; var newItem = {}; = idCount; newItem.main = selectedItemId; newItem.title = dijit.byId('s1').value; newItem.description = dijit.byId('s2').value;

store.newItem(newItem); sel.setStore(store,,{query:{main: 0}}); /* mytree.update();*/

}, label:'Add project' ">

</button> <br>

<button onclick="mytree.refreshModel()">




</table> <br>



<div id="measureLoad">load time : </div> <div id="measureCss"> css load time : </div> <div id="measureDojo">dojo load time: </div>

<script type="dojo/connect">

var menu = dijit.byId("tree_menu"); when we right-click anywhere on the tree, this would open a menu menu.bindDomNode(this.domNode);


<script type="text/javascript">

measurement.loadComplete = new Date();

dojo.byId('measureLoad').innerHTML += (measurement.loadComplete - measurement.startTime) +" ms"; dojo.byId('measureCss').innerHTML += (measurement.cssLoad) +" ms"; dojo.byId('measureDojo').innerHTML += (measurement.dojoLoad) +" ms";



<!-- Top tabs (marked as "center" to take up the main part of the BorderContainer?) -->

<div data-dojo-type="dijit.layout.TabContainer?" data-dojo-props="region:'center', tabStrip:true" id="topTabs">


</body> </body> </html>

Change History (1)

comment:1 Changed 6 years ago by bill

Resolution: duplicate
Status: newclosed

Duplicate of #17496.

Note: See TracTickets for help on using tickets.