dijit.Tree and Sorting

Today I want to talk about the Dojo Toolkit 1.6 version dijit.Tree and Sorting feature.
This will be a very very short tutorial on how to make it work. I recently had to make it work on an already existing application that had a few years old version of Dojo installed. Although looking at the documentation then it doesn’t seem like the new version is much better in this particular area.


To get the sorting working nicely you need 3 main components: store, model and the tree. Here’s my examples on those. I’ll be using an ItemFileWriteStore to get my tree data with Ajax query to in a JSON format. We then need a TreeStoreModel that basically is just a wrapper for our tree nodes.

var myStore = new dojo.data.ItemFileWriteStore({url:"/datasource.php?format=json"});
var treeModel = new dijit.tree.TreeStoreModel({store:myStore,query:{id: "0"}});
var myTree = new dijit.Tree({
    id: 'myTree',
    model: treeModel,
    labelAttrs: "label",
    betweenThreshold: "8",
    dndController: dijit.tree.dndSource,
    checkAcceptance: dragAccept,
    checkItemAcceptance: dropAccept

By now you should have a working dijit.Tree with sorting functions, but no actual storage is happening yet. We’ll get to that in a second. My personal show-stopper was the fact that I tried to use dijit.tree.ForestStoreModel initially which is wrong. No matter how hard I tried – the tree just didn’t allowed sorting nodes with it.

Also, special note on the “betweenThreshold” flag – You need this property(nr of pixels) to tell the tree that the pages can be sorted within it’s current parent, not only dragged between parents. If you don’t have betweenThreshold then Dojo Toolkit 1.6 will not allow you to sort within your current parent.

So far so good. Now you might have noticed I defined dragAccept and dropAccept methods as checkAcceptance and checkItemAcceptance. You can add custom logic to those methods to define what items can be dragged to what parent nodes. This allows you to make some items incompatible with others and can prevent you from mixing Apples with Oranges in your tree. For the purpose of this tutorial we keep them VERY simple and allow sorting between all nodes. This is probably the typical case:

function dragAccept(source,nodes){ return true; }
function dropAccept(target,source,position) { return true; }

In order to store the new sorting order after you release the item from dragging you need a method to save it to the server. You could do it by saving the whole order of the whole tree into array of inputs or some other hack, but I chose the option of sending an ajax POST request on each sorting action. This means every time we release an item we will send a background POST request to the server. This means we don’t need a special SAVE button in the end of our tree. Do achieve that we have to connect to the onPaste method of the treeModel.

If we want to allow modifications to our data via drag-n-drop, we can implement the pasteItem() method and set the drag-n-drop controller for the tree.

dojo.connect(treeModel, 'pasteItem', function(childItem, oldParentItem, newParentItem, bCopy, insertIndex) {
    entityID = childItem.id[0]; // The node that was sorted
    parentID = newParentItem.id[0]; // The new(could be the old one) parent of the node
    order = 0; // We set the order to 0 first
    if (insertIndex != undefined) { // And only override it when the order is defined.
        order = insertIndex;
    // Send POST to server side.
        url: "/saveorder.php?id="+entityID+"&parent="+parentID+"&order="+order,
        load: function(data, ioargs) {
            // Notify user about successful save here.
            alert('Your order was saved!');

That’s IT! You should be done now from the javascript side. The server and JSON parts should be easy as the internet is full of documentation on those. If you are using a PHP backend then it’s just a matter of using json_encode method and reading some $_POST params.

Some more reference material can be found here: http://dojotoolkit.org/documentation/tutorials/1.6/store_driven_tree/

If you have a question or having trouble getting it working then feel free to write a comment and I’ll do my best to help you out. If you would like to read more about Dojo Toolkit related subjects then also make sure to comment on that!

About Reigo Reinmets

Enterprise Software consultant with 12 years of experience in enterprise software world who's working on various projects that are mostly based on Liferay. Most blog posts here are real-life findings and issues we've encountered while working on projects and Java tutorials on Liferay.

Leave a Reply

Your email address will not be published. Required fields are marked *