Refresh 3-state checkboxes

Webix JS
1

I have treecheckboxes in the format of the template below.

The child checkboxes are being set programatically, however doing so doesn’t trigger the parent checkboxes to reflect the 3-state value of the child checkboxes.

How does one accomplish this in the same way as happens when the child checkboxes are clicked manually?

There must be an event that is fired to update the parent 3-state values when the child checkboxes are clicked manually. How can one use this event programatically?

.
.
.

template: function (obj, common) {
                                    return common.space(obj, common) + common.icon(obj, common) + common.treecheckbox(obj, common) + "&nbsp" + obj.Value;
}
2

Hello @Nico,

There must be an event that is fired to update the parent 3-state values when the child checkboxes are clicked manually. How can one use this event programatically?

You can use onItemCheck which fires when you check an item in a tree
Please check the sample: Code Snippet

3

Hi Nastja,

Many thanks for your reply. Note that when clicking manually, the parent 3-state checkboxes work as expected.

The problem I have is that when a child checkbox is checked or unchecked programatically (not by clicking manually), then the parent checkboxes are not updated.

There has to be some event that is fired when a child checkbox is clicked manually that updates the parent checkboxes. What is that event and how can it be used programatically?

Any help will be much appreciated.

4

when checkItem or uncheckItem is used, no extra code is required to paint parent nodes.
https://snippet.webix.com/5t8wf72z

5

Hi intregal, thanks for your comment which put me on the right track. Below is my code which will hopefully help someone else.

        // #region CHECKBOXES

        $$("$treetable1").data.each(function (obj) {
            if (obj.$level === 1) {
                var numberLevel2Checkboxes = 0;
                var numberLevel2Checked = 0;
                var numberLevel3Checkboxes = 0;
                var numberLevel3Checked = 0;

                $$("$treetable1").data.eachChild(obj.id, function (child1obj) {
                    numberLevel2Checkboxes++;

                    $$("$treetable1").data.eachChild(child1obj.id, function (child2obj) {
                        numberLevel3Checkboxes++;

                        if (child2obj.IsHidden) {
                            $$("$treetable1").checkItem(child2obj.id);
                            numberLevel3Checked++;
                        }
                        else
                            $$("$treetable1").uncheckItem(child2obj.id);
                    });

                    // Updated Level 2 checkbox
                    if (numberLevel3Checked === numberLevel3Checkboxes) {
                        // Level 2 Checkbox ticked
                        $$("$treetable1").checkItem(child1obj.id);
                        numberLevel2Checked++;
                    }
                });

                // Update Level 3 checkbox
                if (numberLevel2Checked === numberLevel2Checkboxes) {
                    // Level 1 Checkbox ticked
                    $$("$treetable1").checkItem(obj.id);
                }
            }
        });

        // #endregion CHECKBOXES