The Dijit CheckBox Tree

The dijit CheckBox Tree, github project cbtree, is a dijit widget extending the dijit/Tree. The CheckBox Tree, stores and associated models are highly configurable providing support for, amongst others:

• Multi state checkboxes (checked/unchecked/mixed).
• Parent-Child checkbox relationship.
• Read-Only checkboxes
• Tree Styling and Custom Icons

All dijit CheckBox Tree, model and store modules are fully AMD compliant, the CheckBox Tree comes with a set of extensions allowing the user to enhance and programmatically control every aspect of the tree. All extensions are optional therefore, if the user does not require the functionality they do not need to be loaded:

1. Tree Styling
2. Tree in HTML forms
3. Store Model extension
4. Store CORS support
5. Store Ancestry

The CheckBox

The use of checkboxes is configurable and enabled by default. The CheckBox Tree uses it own so called multi-state checkbox to represent the checked state of a data item. However, the user can substitute the multi-state checkbox with any widget capable of representing a 'checked' state. Whether or not multi-state is allowed, or dual state only, depends on the store model configuration.

If however, you elect to disable the checkbox feature the CheckBox Tree acts like the default dijit Tree but still offering some of the additional benifits like the ability to hide branch and/or leaf icons and all other styling features.

The Stores

Starting with release cbtree-v09-3.0 the CheckBox Tree package includes a new set of stores implementing the cbtree/store/api/Store API. The cbtree store API is an enhancement to the default dojo/store/api/Store API. The following stores are included:

• Memory
• Hierarchy
• ObjectStore
• FileStore

All stores can also be used stand-alone, independent of the CheckBox Tree and models.

Parent-Child Relationship

The CheckBox Tree comes with three store models, one of the Store Model features is the ability to maintain a parent-child relationship. The parent checked state, represented as a tree branch checkbox, is the composite state of all its child checkboxes. For example, if the child checkboxes are either all checked or unchecked the parent will get the same checked or unchecked state. If however, the children checked state is mixed, that is, some are checked while others are unchecked, the parent will get a so called 'mixed' state.

CheckBox Tree Styling

The Tree Styling extension allows you to dynamically manage the tree styling on a per data item basis. Using the simple to use accessor set() you can alter the icon, label and row styling for the entire tree or just a single data item. For example: set("iconClass", "myIcon", item) changes the css icon class associated with all tree node instances of a data item, or if you want to change the label style:

// As a callback of a CheckBox click event
function checkBoxClicked (item, nodeWidget, evt) {
  if (nodeWidget.get("checked")) {
    tree.set("labelStyle", {color:"red"}, item);
  }
}

For a detailed description of Tree Styling Wiki pages.

CheckBox Tree Demos

The cbtree packages comes with a set of demos each demonstrating the CheckBox Tree features and capabilities. Two comprehensive demos are available online:

• Live CheckBox Tree demo
• ArcGIS demo with CheckBox Tree

In addition, the CheckBox Tree wiki has several tutorials using, for example, the popular ArcGIS API for JavaScript.

CheckBox Tree Documentation

As of release cbtree-v09-3.0 all documentation is available online in the cbtree Wiki section and is no longer included in the distribution.

Checkbox Tree Downloads

The github repository cbtree represents the current development stage of the CheckBox Tree project, also known as the incubation stage. It may contain new, untested and undocumented features that are not included in any stable build. No warrenty is provided that such features will be included in future releases.

To get the latest stable version please visit the download section: