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 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.

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.

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.

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.

• 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.

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