Skip navigation

Once again, I’m apparently working in uncharted territory for the Dojo framework. I am working on a rich application that uses a Tree View to navigate certain data. When a user makes changes, the tree needs to update itself. In previous applications I’ve resorted to refreshing the entire tree due to the fact that the dijit.Tree is not very developer friendly. It is difficult to set up in the first place due to lack of documentation. This time however, I decided to dive into the code and figure out how to refresh only certain nodes in the tree. Here is what I found, it is pretty straight forward:

dojo.provide("my.ContentTreeNode");

dojo.require("dijit.Tree");

dojo.declare("my.ContentTreeNode", [dijit._TreeNode], {

	_setIconClassAttr: function(iconClass) {
		dojo.query("> .dijitTreeRow > .dijitTreeContent > .dijitIcon", this.domNode).attr("class", "dijitIcon dijitTreeIcon " + iconClass);
	},

	updateChildItems: function(items) {
		this.clearChildren();
		// set the child items of the node
		this.setChildItems(items);

		this.tree._expandNode(this, true);
	},

	clearChildren: function() {
		var childNodes = this.getChildren();

		dojo.forEach(childNodes, function(childNode) {
			// remove the node from the tree's item node map
			delete this.tree._itemNodesMap[this.tree.model.getIdentity(childNode.item)];
			// remove each node
			this.removeChild(childNode);
		}, this);
	}

});

As you can see, I extended dijit._TreeNode in order to add a few methods.
In order to use this tree node, you’ll also have to extend the dijit.Tree:

dojo.provide("MyContentTree");

dojo.require("dijit.Tree");
dojo.require("my.ContentTreeNode");

dojo.declare("my.ContentTree", [ dijit.Tree ], {
	_createTreeNode: function(args) {
		return new my.ContentTreeNode(args);
	}
});
Advertisements

One Comment

  1. Hello,

    I am also having similar requirement in my application where I have to refresh a particular tree node (not entire tree) on a button click. I am using dijit.Tree, ForestStoreModel and QueryReadStore. As you suggested I have created my Own custom ContentTreeNode and ContentTree but I am not able to understand how to use updateChildItems() function as in JSP I am having only tree object, ForestStoreModel object and QueryReadStore object and this updateChildItems() is inside ContentTreeNode. Please let me know how to use this method in jsp.

    Thanks,
    Bikkie


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: