I am using a tree as an input tool to allow the user to organize categories.
I would like the users to be able to move the nodes around at the top level, specifically reordering them under the same parent.
Everything looks fine until it is time for the store to be updated - the display is wrong - the moved item is not shown in the right place.
require([
"dojo/aspect",
"dojo/store/Memory",
"dojo/store/Observable",
"dijit/Tree",
"dijit/tree/ObjectStoreModel",
"dijit/tree/dndSource",
"dojo/domReady!"
], function(aspect, Memory, Observable, Tree, ObjectStoreModel, dndSource) {
var observableStore, model;
var memoryStore = new Memory({
data: [{
"id": 10,
"position": 0,
"name": "top",
"parent": null
}, {
"id": 19,
"position": 18,
"name": "Audio",
"parent": 10
}, {
"id": 23,
"position": 19,
"name": "Monitors",
"parent": 10
}, {
"id": 20,
"position": 20,
"name": "Communication",
"parent": 10
}, {
"id": 21,
"position": 28,
"name": "Video",
"parent": 10
}, {
"id": 18,
"position": 29,
"name": "Camera",
"parent": 10
}, {
"id": 22,
"position": 40,
"name": "Five",
"parent": 21
}, {
"id": 24,
"position": 60,
"name": "Networking",
"parent": 21
}, {
"id": 25,
"position": 70,
"name": "Toasters",
"parent": 18
}],
mayHaveChildren: function(object) {
var children = this.store.getChildren(object);
return children.length > 0;
},
getChildren: function (object) {
return this.query({parent: object.id});
}
});
observableStore = new Observable(memoryStore);
model = new ObjectStoreModel({
store: observableStore,
query: {
name: "top"
}
});
aspect.around(memoryStore, "put", function(originalPut) {
// To support DnD, the store must support put(child, {parent: parent}).
// Since memory store doesn't, we hack it.
// Since our store is relational, that just amounts to setting child.parent
// to the parent's id.
return function(obj, options) {
if (options && options.parent) {
obj.parent = options.parent.id;
}
return originalPut.call(memoryStore, obj, options);
}
});
var tree =new Tree({
model: model,
dndController: dndSource,
betweenThreshold: 5,
showRoot: false,
persist: false
}, "category-tree").startup();
});
https://bugs.dojotoolkit.org/ticket/18142 - I could invest more time in this, but I don't want to. Choosing a different approach - using traditional inputs and providing a read-only tree view.
See Question&Answers more detail:os