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.


Show

TreeView component is part of IntegralUI Web
a suite of UI Components for development of web apps

If you have any questions, don't hesitate to contact us at support@lidorsystems.com

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.

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:

Currently ReactJS doesn't have full support for Web Components. Mainly because of the way data is passed to the component via attributes and their own synthetic event system. For this reason, you can use available wrappers located under /integralui/wrappers directory, which are ReactJS components that provide all public API from specific IntegralUI component.

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.

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.

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.

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

The TreeView is a native Web Component, part of IntegralUI Web.