TreeView where Items have Radio Buttons

Having a radio button for items in TreeView component is already built-in. This feature is optional, you only need to specify in tree data whether the item will display and use a radio button or not. Parent nodes don't have to show a radio button, they will operate as a radio group for all child nodes with radio buttons.

You will find sample code that shows how to create items with radio buttons in TreeView in JavaScript, Angular, React and Vue, in following sections below.

In this example, we have a tree structure where some items show a radio button before their label. Only one radio button is checked within a radio group. You can have multiple radio groups in the tree hierarchy, where each group acts separately from other groups or parent nodes.

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

TreeView with Radio Buttons

The IntegralUI TreeView comes with built-in support for showing radio button in tree items. You can decide which item can have a radio button. This allows you to set only small part of tree hierarchy to use radio buttons.

How to Add a Radio Button to TreeView

Each tree node can display a radio button. Depending on allowRadioButton field value (true or false) of item object, the radio button will appear in front of item label or not. Automatically, a radio group is created using the parent node as a group that will determine which radio button from child nodes is checked, so that there is only one checked radio button in the same group.

Related: How to Add Custom Content to Tree Items

• JavaScript
• Angular
• React
• Vue

The IntegralUI RadioButton component is internally used by the TreeView to show radio buttons in tree items. You can modify the appearance of radio buttons using custom CSS properties or classes.

How to Handle Changes when Radio Button is Checked

Whenever a radio button is checked, the TreeView fires the checkedChanged event, where event data contains the item object that has its radio button checked and the checked value: true or false. You can handle this event in your code and add some specific action on change:

• JavaScript
• Angular
• React
• Vue

In this example, when node with radio button is checked, the console window will show a message with event data.

Conclusion

Having Radio Buttons in IntegralUI TreeView component is a built-in feature. You can add a radio button to each node separately. When radio buttons are in use, parent nodes act as a radio group for all child nodes with radio buttons so that only one button is checked at time per each group. Any change to the radio button fires an event that you can handle in your code and add custom action.

A sample code is available in JavaScript, Angular, React and Vue that shows how to create TreeView with radio buttons. The TreeView is a native Web Component, part of IntegralUI Web that you can use in any JavaScript framework.