Getting the Selected Dijit Tree node in Dojo

This post shows you how to get the selected node in a Dijit tree.

Let’s assume we have the following dijit tree data store.

	"type": "parent",
	"name": "Countries",
	"id": "countries",
		{"type":"Leaf", "name":"Country 1", "id":"country1"},
		{"type":"Leaf", "name":"Country 2", "id":"country2"},
		{"type":"Leaf", "name":"Country 3", "id":"country3"},
		{"type":"Leaf", "name":"Country 4", "id":"country4"},
		{"type":"Leaf", "name":"Country 5", "id":"country5"},
		{"type":"Leaf", "name":"Country 6", "id":"country6"}

Using the following JavaScript code the tree is loaded with the desired hierarchy.

<script type="text/javascript">// <![CDATA[

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");

// ]]></script>

In order to get the selected tree node object you should use the “selectedItem” attribute in the Dijit tree object as follows

dijit.byId("[Tree Node ID]").attr("selectedItem");

In our example to show the id of the selected leaf node when clicking the “Get Selected Node” button, the following code will do the job:

if (dijit.byId("treeDiv").attr("selectedItem") != null) {
	if (dijit.byId("treeDiv").attr("selectedItem").type == "Leaf") {
		document.getElementById("selectedNode").innerHTML =
                "Selected Node is " + dijit.byId("treeDiv").attr("selectedItem").id;

This code is tested in Dojo 1.4 environment. download the code from here.

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.

One thought on “Getting the Selected Dijit Tree node in Dojo

  1. Pingback: Homepage

Comments are closed.