Dojo tree partial updates

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

Dojo’s dijit.PopupMenuItem

I just thought I’d share this since Dojo’s documentation is lacking useful information. It seems like no matter how many documentation websites the guys at Dojo create, they never fully document everything. Here is a perfect example. I couldn’t for the life of me find out how to programatically create a dijit.PopupMenuItem. Through trial and error I figured this out:

var menuItem = new dijit.PopupMenuItem({
	label: "My Item",
	iconClass: "myIconClass",
	popup: new dijit.Menu()
});

The key being the popup property. If you don’t initialize the popup property with an instance of a new dijit.Menu, the whole thing doesn’t work. You can then use menuItem.popup.addChild(…) to add new menu items to the popup menu item.