Note: This article has been superceded by the The new Dijit CheckBox Tree. The interim 1.7 release referred to in this post is therefore no longer available for download.

More than 2 years after I posted the first version of the dijit tree with multi state checkboxes for dojo 1.4,  and after 20,000+ downloads it was time to get an updated version out.

Actually, it wasn’t until dojo 1.6/1.7 was released that I started to get feedback that the old version wasn’t working properly any more.

Well friends, the 1.7 tree is here with full support for the claro theme and I believe some nice additions. See the picture below.

Tree - claro

Issues reported

The issues reported using the Dijit Multi State Checkbox Tree version 1.4 with dojo 1.6/1.7 can be summarized as follows:

  1. Updates to checkboxes could not be seen until one would hover over the checkbox.
  2. The properties ‘branchIcons’ and ‘nodeIcons’ no longer worked.
  3. No support for the dojo 1.5 claro theme.
  4. Firebug reported the use of deprecated functions.

I’m happy to report, all of the issues have been resolved.

In addition, some people asked if there was any easy way to change the checkbox state programmatically. But then again, others asked if I could write their entire application using my dijit tree because they liked it so much.

I will follow this blog up with a more detailed explanation of the changes required to get everything working again for dojo 1.7. Most of the time went actually into setting up my environment again, you known, getting the latest and greatest version of every tool and then getting everything to work again. All-in-all it took about a day to get every updated and back to normal again. But here is just an excerpt of some of the reasons causing the problems:

As it appears the dojo team had decided to adopt the new AMD technology which stands for Asynchronous Module Definition. Starting with dojo 1,6 an entire refactoring was kicked off which, as far as I understand, should lead to the new and improved dojo 2.0 platform. The implementation of AMD introduced new language structures and as a result of the refactoring new feature were added and of course others got dropped or some behavior slightly changed.

If you are interested in reading more about AMD, and who isn’t right? checkout the following sites:

http://dojotoolkit.org/blog/learn-more-about-amd

https://github.com/amdjs/amdjs-api/wiki/AMD

A good exercise to see how well your code holds up in relation to dojo 1.6/1.7 is to download the latest version of firebug (still the best javascript tool available, don’t leave home without it) and run dojo 1.7 in debug mode. Most likely you will get some warnings regarding the use of deprecated methods/functions.

What’s new in the 1.7 Checkbox Tree

As mentioned before, some people asked if there was an easy way to change the checkboxes programmatically. Well, if you are into dojo everything is simple, just do a fetch() on the model store and call the updateCheckbox() method for each store item with its new state.

Ok, to make is even simpler, version 1.7 has two new methods called check() and uncheck() which allow you to do just that. Both methods take three arguments:

  1. Query
  2. Callback
  3. Scope

The query argument can be either a string or query object. The optional callback argument is a function which is called on completion with the number of store items that matched the query and the number of store items that matched the query and actually changed state. Finally, the optional scope argument specifies the context in which the callback function is to be executed. The release notes have several sample of the new methods. As an example:

myTree.model.check( { name: "John" }, notifyMe, this );

The store will be queried for every item whos name property equals “John” and if the associated checkbox is unchecked it will get checked. How easy is that…

In addition, a new property was added to the tree model which allows to make checkboxes associated with branches read-only.

Download the latest version

The latest AMD version of the Dijit Tree with Multi State Checkboxes can be downloaded here.

And for those who are wondering: “will the 1.7 tree work with dojo 1.6” the answer is: NO, a quick test reveiled that the new language structures required for AMD support are not available in 1.6.