I need to create a tree-view which allows users to select nodes (using a checkbox). The tree-view contains two types of node, "group" and "item". A "group" node can contain both "group" and "item" nodes. An item node can't contain other nodes. Crucially selecting a group node should automatically select all node below it (to the bottom of the tree).

However, due to this last criteria I can't figure out the following behaviour (I make reference to the attached diagram).

  1. The user selects Group A
  2. Now Group A, Group B, Item 1 and Item 2 are now checked.
  3. The user then deselects Item 1

What should the state of Group A be (checked, unchecked or indeterminate)?


  • Does your implementation automatically select Group A if Group B, Item 1, and Item 2 are all independently selected by the user?
    – Kit Grose
    Commented Jan 14, 2019 at 7:00

2 Answers 2


The latter answer is generally used in the tree view on MS based products.

I would question the what are you trying to achieve from a users point of view, symbols are fine in long used MS products, but you don't have the luxury of that familiarity. I would suggest:


download bmml source – Wireframes created with Balsamiq Mockups


We ended up solving this problem by adding a new node to each group node that had children of both group and item node types.

For example, "Group A" would have an additional node called "Group A items" added to it. This node was purely presentational and didn't exist in our backend, when this fake node was clicked it would select the children item nodes for "Group A". This allowed us to use the indeterminate state of "Group A".

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.