dhtmlxTree operates the advanced chechbox system. Besides usual two-state checkboxes (checked item, unchecked item), there is the possibility to use three-state checkboxes with “partly-checked” value.

Method enableCheckboxes() does the very thing:

    <script>
        tree.enableCheckBoxes(mode, hidden);
    </script>
 

The parameters here are as follows:

• mode(true|false) - false stands for hiding all the checkboxes, while true stands for showing them all in the tree;
• hidden - setting it to true means that checkboxes are not rendered, but can be shown by showItemCheckbox() method.

In case of creating checkboxes with the help of the above mentioned method, they will possess the usual checkbox states:

• checked;
• unchecked.

The following method is responsible for enabling three-state checkboxes:

    <script>
        tree.enableThreeStateCheckboxes(true|false);
    </script>
 

The following states are available for three-state checkboxes:

• checked;
• unchecked;
• partially checked.

The third state takes place when the item has several child nodes among which there are checked and unchecked ones.

It should be noted that in case when three-state checkboxes are enabled, a click on a parent unchecked checkbox will result in checking it together with all its child items, and vice versa.

A checkbox of a certain item can be disabled. The parameters that are to be specified:

• itemId - id of the item in question;
• mode(true|false) - indicates whether the checkbox is disabled (true) or enabled (false).

    <script>
        tree.disableCheckbox(itemId,mode);
    </script>
 

The user can set checkboxes for some specific items only. This can be done in the following way:

    <script>
        tree.enableCheckBoxes(true, true);
        ...   
        tree.showItemCheckbox(id, mode);
    </script>
 

The parameters here are:

• id - id of the item;
• mode (true|false) - whether the checkbox will be visible (true) or not (false).

Method enableSmartCheckboxes() enables three-state checkboxes logic. By default it is set to false:

    <script>
        tree.enableSmartCheckboxes(true|false); // false by default
    </script>
 

Any checkbox in the tree can be easily checked|unchecked from script with the help of the following method:

    <script>
        tree.setCheck(id, mode);
    </script>
 

The parameters are as follows:

• id - id of the item in question;
• mode (true|false) - if set to true, the item will be checked, while false means unchecking the item.

It should be noted that according to three-state checkboxes' logic, if a parent item was checked with the help of setCheck() method, all its child items will become checked as well.

Along with checking a tree item, a tree branch can also be easily checked/unchecked from script in the following way:

    <script>
        tree.setSubChecked(id, state);
    </script>
 

The parameters are as follows:

• id - id of the item in question;
• state (true|false) - if set to true, the branch of items will be checked, while false means unchecking the branch.

State of the specified item's checkbox can be got in the following way:

    <script>
        var checkState = tree.isItemChecked(itemId);
    </script>