Dojo/Dijit Tree with Checkbox

Introduction

NOTE:

The new and fully AMD compliant version of the Dijit CheckBox Tree can be found HERE. Please refer to the updated version going forward.

Like so many I have been looking for an implementation of a of Dijit tree structure with checkboxes but was unable to find one or at least one that provided the functionality I was looking for so I decided to create one myself. This document describes all the steps required to create a fully functional tree similar to what you are used to see with many software installation packages. I will try to keep things simple and at the same time try to explain some of the dojo and dijit fundamentals when needed. However, I do not claim to be a dojo expert (just a disclaimer).

Tree-step-3

Before we get started I want to define the functional requirements for our tree. I know, what do we need requirements for you say, let’s just start hacking. Well in order to set some goals and to make sure everybody is on the same page so I’ll go ahead anyway.

Function Requirements

The functional requirements I wanted to implement are as follows:

  • The tree must be based on the dojo framework and the digit tree in particular.
  • It must be able to support both trees with and without checkboxes so I only need one widget going forward.
  • The tree must be able to maintain a parent-child checkbox relationship. What I mean by this is that for example if a parent checkbox is checked all child and grandchild checkboxes will automatically be checked as well, or if one of the children is unchecked the parent and potentially its parent is unchecked automatically.
  • I want to be able to specify the initial state (checked/unchecked) of a checkbox but I don’t want to be forced having to do this for every checkbox. For example, if all checkboxes have a default state of ‘checked’ with the exception of only a few, I want to be able to define the default state once and only deal with the exceptions.
  • I want to be able to define if the root node of the tree requires a checkbox. (more on the root of a tree later).

Well, if that’s what you have been looking for too, stick around and continue reading if not Oh well go have fun with what you are doing.

Step 1 – The Development Environment

In order to get started you need to make sure you have version 1.3.2 of dojo installed on your system. I would recommend to get the source version of dojo because it will include some very useful utilities. Dojo can be downloaded from:

http://download.dojotoolkit.org/release-1.3.2

The file you will be looking for is: dojo-release-1.3.2-src both zip and tar versions are available. All source samples in this tutorial are based on dojo version 1.3.2 and will NOT work with version 1.4. I picked version 1.3.2. because it is currently the most used version. I will address the relevant differences between dojo 1.3.2 and 1.4 with regards to the dijit Tree at the end and yes I do also have a version available that does work with dojo version 1.4.

You are also going to need some sort of http server, I’m not going to make any recommendations but I’m using the latest version of Apache. Apache by the way is used by many prepackaged web servers like WAMP or ZendServer CE.

Second, you will need to create the appropriate directory structure to follow this tutorial. If you don’t you will have to make the necessary changes while reading along. The directory structure I use looks as follows:

Directory Structure 

I renamed my dojo directory from ‘dojo-release-1.3.2’ to’ dojotoolkit’, If you don’t have the \dojotoolkit\util directory you did not install the dojo source version, just to make sure, it is not required for this tutorial. Beside the standard dojo directory structure I created two additional directories call ‘datastore’ and ‘tmpdir’. The datastore directory will hold the Json source file we will be using for this exercise and can be downloaded from: http://dojocampus.org/explorer/#Dijit_Tree_Basic
Next, after installing your web server point your web server docroot to the html subdirectory, I would recommend to configure a virtual server , something like this:

Listen 8080
<VirtualHost *:8080>
      DocumentRoot “D:\MyServer\html”
      <Directory “D:\MyServer\html”>
             Options All +Indexes +FollowSymlinks
             AllowOverride all
             Order allow,deny
             Allow from all
      </Directory>
</VirtualHost>

If you are not familiar with Apache checkout the Apache httpd website for more information: http://httpd.apache.org/ or if you just need info on virtual host configuration http://httpd.apache.org/docs/2.0/vhosts/.

Ok, now that we have most of the basics out of the way and our system setup it is time to start talking about the standard dijit tree implementation. The latest installment of the dijit tree is implemented using the Model-View-Controller architectural pattern, the general idea here is to isolate any logic from the input and presentation. I’m not going to spend any time on the MVC pattern, there is enough MVC stuff on the web if you really want to get into it you could start at: http://en.wikipedia.org/wiki/Model-view-controller

The most important part you need to know is that dojo uses the following classes to implement the MVC pattern:

Model \html\js\dojotoolkit\dijit\tree\ForestStoreModel.js
View \html\js\dojotoolkit\dijit\Tree.js
Data \html\js\dojotoolkit\dojo\data\ItemFileReadStore.js

In this tutorial we will follow the same MVC model and again if you are not familiar with it I think you will start to like it once you see what it will do for us and our checkbox tree. The final result will show there is relatively little we need to do to the original dijit tree. Ok, its time to start get some coding going.

In case you can’t wait until the end of the tutorial, you can download the fully documented source files from here.

In STEP 2 we’re first explore the default dijit tree and then start our project.

2 Replies to “Dojo/Dijit Tree with Checkbox”

  1. Hello,

    I can able to create the checkbox tree with same code and a JSON input file (FileInputStore).

    In my application I have to create it from an object Store. I just need to display checkbox tree, I will fire events to my application when checkboxes checked or un-checked.

    How to modify your code to read from an Object Store ?

Leave a Reply

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