Tri-State CheckBoxes in TreeView Component

In general, nodes in TreeView component only have a label. By modifying the item template, you can add any HTML element or web components and arrange them in custom layouts. For check boxes, you can use the input element and set it to appear before the item label.

Here you will learn how to add a checkbox to each node in TreeView component. Also explains how to cascade changes to checkbox values to parent and child nodes automatically. You will find sample code in JavaScript, Angular, React and Vue, in following sections below.

In this example, each TreeView node has a custom check box, shown before its label. The demo simulates cascading changes to the checkbox. Whenever item's check box value changes, all parent and child items update their check box value.

In addition, using the Select component, you can choose which items are displayed in the right list, based on checkbox value: unchecked, indeterminate or checked.

The complete sample code is available in Quick Start application as part of IntegralUI Web library.

Use Built-in CheckBox for Each Item in TreeView

To add a checkbox to each item in TreeView is simple. You can use the built-in feature that allows you to show checkboxes with two or three state values: unchecked, indeterminate or checked. Follow these steps:

1. Set checkBoxes property to true
2. (Optional) set checkMode property to one of the IntegralUICheckMode values: TwoState or ThreeState.
3. Set the checked or checkState field to each item to true/false or one of the three state values.

Default value for checkMode is set to TwoState, so if you don't need a three-state checkbox, you can omit this setting.

That's it, now before item's label a checkbox will appear, and any cascading changes to checkbox values from child nodes will also affect their parents, and vice versa.

• JavaScript
• Angular
• React
• Vue

You can still customize the checkbox appearance using CSS, by providing your own icons for each check box state.

Below you will find information on how to create a custom checkbox to each node with sample code and how to apply cascading changes to check box values in parent and child nodes.

How to Add a Tri-State CheckBox to TreeView Nodes in Angular, React and Vue

To create a checkbox you can use the input element or for more custom look and feel, the standard HTML span element with checkbox icon as a background. Depending on checkbox value, a different icon is displayed. The item template that includes a check box looks like this:

• JavaScript
• Angular
• React
• Vue

There are three span elements in the template:

• first element - its background is a checkbox icon
• second element- its background is the item icon
• third element - represents the item label

Whenever the checkbox is clicked, its appearance is updated and checkState value of corresponding item is updated. At first, this only updates the checkbox value of the item, but checkboxes of parent and child items remain unchanged. How to update these values is explained below.

Auto Update Check Box Values in Parent and Child Nodes

In order to update checkbox value of parent items for specified item, you need to create a loop that will go through all parents of the item. Next, for each parent calculate how many child items have its checkState in checked and indeterminate value separately.

Then, compare these values to number of child items. If the number is equal, then the parent checkbox value is checked. Otherwise if there is at least one child item with checked or indeterminate state, set the parent checkbox value to indeterminate. By default, checkbox value is unchecked.

• JavaScript
• Angular
• React
• Vue

In similar way, for child items you need to create a loop and go through all child items for specified item. This needs to be a recursive function, which will continue to go deep down the tree hierarchy until it reaches all child items.

Depending on checkbox value of top item, child items can be either checked or unchecked. In this case, you cannot have indeterminate value. This value only applies from child to parent items.

• JavaScript
• Angular
• React
• Vue

Show a List of Checked Nodes

Finally, we have a TreeView where each node has a checkbox, and changes are updated automatically for parent and child nodes. To complete this functionality, you may need to retrieve a list of checked or unchecked nodes.

In above demonstration, as a solution there is a Select component stating check box values: unchecked, indeterminate and checked. Depending on selected option, the list is populated.

• JavaScript
• Angular
• React
• Vue

To populate the list (represented by the List component), we are using the getFullList method from TreeView, which retrieves a flat list of all items in the tree hierarchy. We are comparing the check value of each item object against the selected option in the combo box, if it matches; the item is added to the list. At the end, the list layout is updated.

Using the getFullList method maintains high performance, because instead going through the tree hierarchy you are working with a linear list.

Conclusion

To add a CheckBox to nodes in TreeView (a web component that you can use in Angular, React and Vue), you can use the built-in feature for checkboxes or modify the item template. In addition, you can create custom functionality that cascades changes to checkbox value of parent and child items whenever an item is clicked. Finally, you can display a list of all checked nodes.

You can use this sample as a guideline to create your own solution, and further extend it to match your application requirements. A sample code is available in JavaScript, Angular, React and Vue that shows how to create TreeView with three state checkboxes. The TreeView is a native Web Component, part of IntegralUI Web that you can use in any JavaScript framework.