Refreshing Dijit tree in Dojo (code that works)

Refreshing the Dijit tree in Dojo with a new data store does not have a ready-made API in Dojo (Iam talking about Dojo 1.4). In this post, I will show a technique with example that will illustrate how to refresh the Dijit tree with a new data store.

The solution is about extending the dijit.Tree to support this feature as shown in the refreshModel method.

<script type="text/javascript">// <![CDATA[
	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;

			// remove the rootNode
			if (this.rootNode) {

			// reload the tree
// ]]></script>

Let’s see now an example of refreshing the tree using this new introduced API.


<button id="refreshTreeButton" class="buttonClass" onclick="refreshTreeInformation();" type="button">Refresh Tree</button><script type="text/javascript">// <![CDATA[
	dojo.addOnLoad(function() {	
		var store = new{
			url: "sampleData.json"

		var treeModel = new dijit.tree.ForestStoreModel({
			store: store,
			query: {"type": "parent"},
			rootId: "root",
			rootLabel: "Groups",
			childrenAttrs: ["children"]

		var treeObject = new dijit.Tree({
			model: treeModel
		}, "treeDiv");

	function refreshTreeInformation() {		
		var treeObject = dijit.byId("treeDiv");
		var newStore = new{
			url: "sampleData2.json"
		}); = newStore;		
		treeObject.model.query = {"type": "parent"};	
		treeObject.rootId = "root";	
		treeObject.rootLabel = "Groups";	
		treeObject.childrenAttrs = ["children"];						

// ]]></script>

In the refreshTreeInformation function, the tree object is retrieved, a new store is loaded, and assigned to the tree model object. Finally calling the refreshModel method will make the displayed tree insync with the underlying model. you can download the code from here.

I wish this tip can help.

This entry was posted in Dojo, JavaScript, Web 2.0 and tagged , , , , , , , by Hazem Saleh. Bookmark the permalink.

About Hazem Saleh

Hazem Saleh has more than eleven years of experience in Cloud, Mobile and Open Source technologies. He worked as a software engineer, technical leader, application architect, and technical consultant for many clients around the world. He is an Apache PMC (Project Management Committee) member and a person who spent many years of his life writing open source software. Beside being the author of the "JavaScript Unit Testing" book, "JavaScript Mobile Application Development" book, "Pro JSF and HTML5" book and the co-author of the "Definitive guide to Apache MyFaces" book, Hazem is also an author of many technical articles, a developerWorks contributing author and a technical speaker in both local and international conferences such as ApacheCon North America, Geecon, JavaLand, JSFDays, CON-FESS Vienna and JavaOne. Hazem is an XIBMer, he worked in IBM for ten years. Now, He is working for Nickelodeon New York as a Mobile Architect. He is also an OpenGroup Master Certified Specialist.

2 thoughts on “Refreshing Dijit tree in Dojo (code that works)

  1. Finally! An example I can get to work. 🙂
    However, I need some help … The example reads a file (sampleData.json). I needed my page to call a server-side PHP that returns a file system structure. That works OK but …
    Q1. I need to retrieve the data into the tree when the user makes a selection from a pull down (the value of which is passed to the server routine)
    Q2. I need the tree to be populated upon return of the data from the server – not when the is loaded.

    I’ve been hacking away at this for several weeks and I just can’t get past these two things. Hopefully, someone will hear my plea for help!

Comments are closed.