@cas-smartdesign/tree

An element for visualizing tree data structure.

Attributes - Tree

• focus-index
  • Defines the index of the focused node
• parent-selection-allowed
  • Allows a parent node to have individual value, this means that in this mode if a parent node is selected its children are not selected automatically
• readonly
  • Defines whether if the tree is in readonly mode
    • In this mode the selection handling is disabled and the checkbox is not rendered

Properties - Tree

• rootNodeCount number (default=0)
  • Defines the number of root nodes
• nodes INode[] (default=empty)
  • The tree data
• focusIndex number (default=-1)
  • Reflects the corresponding attribute
• readonly boolean (default=false)
  • Reflects the corresponding attribute

Custom events - Tree

• data-request
  • This event is dispatched for loading child nodes for the actively expanded node.

Public methods - Tree

• addNodes
  • Used for adding either root or non-root nodes to patch the missing visible parts of the tree
• setNodes
  • Used for overwriting all nodes in the tree
  • If called frequently, this can have an impact on the performance

Attributes - TreeNode

• text
  • Defines the text content of the node
• expanded
  • Defines whether if the children of the node are visible
• selection-state
  • Defines whether if the node is in checked, unchecked or indeterminate state
    • The indeterminate state mean that only some, not all of it children are selected
    • This state can only occur when parent selection is not allowed
• node-id
  • Defines the id of the node
• child-count
  • Defines the number of children of the node
• focused
  • Defines whether if the node is focused
• readonly
  • Defines whether if the node is in readonly mode
• type
  • Defines the type of the node
    • Possible value are: checkbox, radio
• disabled
  • Defines whether if the input of the node is disabled

Properties - TreeNode

• text, expanded, selectionState, nodeId, childCount, focused, readonly, type, disabled
  • Reflects the corresponding attribute
• depth number (default=0)
  • Defines the number of level the node is on in the tree
• path string[] (default=empty)
  • Defines the path by which the node is reachable
  • This is used to identify the nodes as one node can be present multiple times under different parents

Custom events - TreeNode

• expansion
  • This event is dispatched whenever a tree node is expanded / collapsed
• selection
  • This event is dispatched whenever a tree node is selected

Custom CSS Properties - TreeNode

• --sd-tree-readonly-focus-color
  • Defines the background color of a node if it's focused in readonly mode

Selection

Parent selection is allowed

• It is enabled by setting the parent-selection-allowed attribute on the tree to true
• When a node is selected, then:
  • For each ancestor of the node, the following happens:
    • the ancestor is selected
    • if it is a radio button node then all its siblings are unselected
• When a node is unselected, then:
  • For each ancestor of the node, until an enabled one is found, the ancestor is unselected

Parent selection is not allowed

• It is enabled by setting the parent-selection-allowed attribute on the tree to false or removing it
• When a node is selected, then:
  • The selection state of all its ancestors are updated
  • All its descendants are selected
• When a node is unselected, then:
  • The selection state of all its ancestors are updated
  • All its descendants are unselected
• When updating the selection state of a parent node
  • If a node has all of its descendants selected, then it is selected
  • If a node has only some of its descendants selected, then it is in indeterminate state
  • If a node has none of its descendants selected, then it is unselected