BU01 Essential Properties

The minimum required configuration to display a tree

Live Demo
Configuration
HTML + JavaScript 
 
 
Property Reference
 
Required Properties
 
data — Array of objects (set via JS property)
 
id-member — Property for unique node IDs
 
path-member — Property for hierarchical paths
 
display-value-member — Property to display as label
 
Optional Properties
 
expand-level — Auto-expand depth (default: 2)
 
should-toggle-on-node-click — Click to expand/collapse
 
sortCallback — Custom sort function (JS property)
 
Path Structure
 
Dot-separated hierarchy: "1", "1.1", "1.1.1", etc.
 
BU02 Expand Level Control
 
Control which levels are expanded by default
 
Deep Tree
 
 
Expand Levels
 
 
 
Three levels (3)
 
Level Behavior
 
Level 0
 
All nodes collapsed. Users must manually expand.
 
Level 1
 
Only root level nodes visible.
 
Level 2+ (Default)
 
Shows root and children up to that depth.
 
Performance Note
 
Higher expand levels may impact initial render time with large datasets. Use virtual scrolling for 1000+ nodes.
 
BU03 Minimal Configuration
 
The absolute minimum to get a tree rendering
 
Minimal Tree
 
 
Code
 
Minimal HTML 
 
 
 
Defaults
 
Default Behavior
 
  • Expand level: 2 (root + first children)
    •  
  • Click toggle icon to expand/collapse
    •  
  • Keyboard navigation enabled
    •  
  • No drag & drop (mode: none)
    •  
  • No context menu
 
Member Defaults
 
Only idMember (id), pathMember (path), and displayValueMember (displayValue) have defaults.
						All other member properties are auto-calculated by the LTree engine.