syncfusion-javascript-treeview

# Implementing Syncfusion TypeScript TreeView - Complete Guide The **TreeView** component is a powerful navigation control for displaying hierarchical data in a tree structure with advanced capabilities including data binding, multi-selection, checkboxes, node editing, drag-and-drop, and customizable templates. --- ## When to Use This Skill Use this skill when you need to: - **Display hierarchical data** in a tree structure (folders, categories, organizational charts) - **Enable user selection** with single or multiple node selection modes - **Add checkboxes** for multi-select scenarios with parent-child relationships - **Manipulate nodes dynamically** (add, remove, update, move nodes at runtime) - **Edit node text** with inline editing and validation - **Customize appearance** with templates, custom icons, and styling - **Handle user interactions** like click, expand/collapse, and keyboard navigation - **Load data efficiently** with lazy loading and remote data sources - **Implement accessibility** features like keyboard shortcuts and ARIA support - **Drag and drop** nodes to reorganize hierarchical structure ## Control Overview The TreeView supports: - **Data Binding:** Hierarchical, self-referential, and remote data sources - **Selection Modes:** Single select, multi-select, checkbox selection - **Node Operations:** Add, remove, update, refresh, move nodes - **Events:** Click, select, check, expand, collapse, edit, key press (20 events total) - **Customization:** Templates, icons, styling, themes, RTL support - **Performance:** Lazy loading (load on demand) by default - **Accessibility:** Keyboard navigation, ARIA attributes, screen reader support ## Quick Start ```typescript import { enableRipple } from '@syncfusion/ej2-base'; import { TreeView } from '@syncfusion/ej2-navigations'; enableRipple(true); // Define hierarchical data let treeData = [ { nodeId: '01', nodeText: 'Documents', nodeChild: [ { nodeId: '01-01', nodeText: 'Reports.pdf' }, { nodeId: '01-02', nodeText: 'Proposals.docx' } ] }, { nodeId: '02', nodeText: 'Images', expanded: true, nodeChild: [ { nodeId: '02-01', nodeText: 'photo1.jpg' }, { nodeId: '02-02', nodeText: 'photo2.jpg' } ] } ]; // Initialize TreeView let treeView = new TreeView({ fields: { dataSource: treeData, id: 'nodeId', text: 'nodeText', child: 'nodeChild' } }); treeView.appendTo('#tree'); ``` --- ## Core Concepts ### Data Binding Types 1. **Hierarchical Data** - Nested child objects 2. **Self-Referential** - Flat array with parent ID references 3. **Remote Data** - DataManager with OData, Web API, or custom adaptor ### Selection Modes 1. **Single Select** - Default, one node at a time 2. **Multi-Select** - Multiple nodes with Ctrl/Cmd click 3. **Checkbox** - Visual checkboxes for multi-select ### Node States - **Expanded** - Children visible - **Collapsed** - Children hidden - **Selected** - User selected - **Checked** - Checkbox checked - **Disabled** - Interaction disabled --- ## Complete API Reference ### Properties (31 Total) #### Data & Binding Properties **1. fields** (`FieldsSettingsModel`) Specifies data source and field mapping for TreeView nodes. ```typescript let treeView = new TreeView({ fields: { dataSource: data, id: 'nodeId', text: 'nodeText', child: 'nodeChild', parentID: 'pid', hasChildren: 'hasChild', expanded: 'isExpanded', selected: 'isSelected', isChecked: 'checked', tooltip: 'tooltipText', iconCss: 'icon', imageUrl: 'image', htmlAttributes: 'attrs', navigateUrl: 'url', selectable: 'isSelectable' } }); ``` **2. selectedNodes** (`string[]`, default: []) Array of IDs representing currently selected nodes. ```typescript let treeView = new TreeView({ fields: { dataSource: data, id: 'id', text: 'name', child: 'child' }, selectedNodes: ['01', '02'] // Pre-select nodes }); // Get selected nodes console.log(treeView.selectedNodes); // ['01', '02'] // Set selected nodes programmatically treeView.selectedNodes = ['03', '04']; treeView.dataBind(); ``` **3. checkedNodes** (`string[]`, default: []) Array of IDs representing currently checked nodes. ```typescript let treeView = new TreeView({ fields: { dataSource: data, id: 'id', text: 'name', child: 'child' }, showCheckBox: true, checkedNodes: ['01', '03'] // Pre-check nodes }); // Get checked nodes console.log(treeView.checkedNodes); ``` **4. expandedNodes** (`string[]`, default: []) Array of IDs representing expanded nodes. ```typescript let treeView = new TreeView({ fields: { dataSource: data, id: 'id', text: 'name', child: 'child' }, expandedNodes: ['01', '02'] // Expand specific nodes }); ``` **5. showCheckBox** (`boolean`, default: false) Display CheckBoxes in TreeView for multi-select. ```typescript let treeView = new TreeView({ fields: { dataSource: data, id: 'id', text: 'name', child: 'child' }, showCheckBox: true // Enable checkboxes }); ``` #### State & Behavior Properties **6. disabled** (`boolean`, default: false) Disable all TreeView interactions. ```typescript let treeView = new TreeView({ fields: { dataSource: data, id: 'id', text: 'name', child: 'child' }, disabled: false // Set to true to disable }); // Enable/disable dynamically treeView.disabled = true; treeView.dataBind(); ``` **7. allowDragAndDrop** (`boolean`, default: false) Enable drag and drop of nodes. ```typescript let treeView = new TreeView({ fields: { dataSource: data, id: 'id', text: 'name', child: 'child' }, allowDragAndDrop: true // Enable drag-drop }); ``` **8. allowEditing** (`boolean`, default: false) Enable inline editing of node text. ```typescript let treeView = new TreeView({ fields: { dataSource: data, id: 'id', text: 'name', child: 'child' }, allowEditing: true // Enable inline editing }); ``` **9. allowMultiSelection** (`boolean`, default: false) Enable multi-selection of nodes with Ctrl/Cmd. ```typescript let treeView = new TreeView({ fields: { dataSource: data, id: 'id', text: 'name', child: 'child' }, allowMultiSelection: true }); ``` **10. allowTextWrap** (`boolean`, default: false) Allow text to wrap to multiple lines in nodes. ```typescript let treeView = new TreeView({ fields: { dataSource: data, id: 'id', text: 'name', child: 'child' }, allowTextWrap: true }); ``` **11. autoCheck** (`boolean`, default: true) Auto-check/uncheck parent and child nodes when checking parent. ```typescript let treeView = new TreeView({ fields: { dataSource: data, id: 'id', text: 'name', child: 'child' }, showCheckBox: true, autoCheck: true // Parent-child auto-check enabled }); ``` **12. checkDisabledChildren** (`boolean`, default: true) Check disabled children when parent is checked. ```typescript let treeView = new TreeView({ fields: { dataSource: data, id: 'id', text: 'name', child: 'child' }, showCheckBox: true, checkDisabledChildren: true }); ``` **13. checkOnClick** (`boolean`, default: false) Check/uncheck node on clicking node text (instead of just checkbox). ```typescript let treeView = new TreeView({ fields: { dataSource: data, id: 'id', text: 'name', child: 'child' }, showCheckBox: true, checkOnClick: true // Click text to check/uncheck }); ``` **14. fullRowSelect** (`boolean`, default: true) Select entire row instead of just text. ```typescript let treeView = new TreeView({ fields: { dataSource: data, id: 'id', text: 'name', child: 'child' }, fullRowSelect: true // Full row is selectable }); ``` **15. fullRowNavigable** (`boolean`, default: false) Navigate entire row with arrow keys instead of text only. ```typescript let treeView = new TreeView({ fields: { dataSource: data, id: 'id', text: 'name', child: 'child' }, fullRowNavigable: true }); ``` **16. loadOnDemand** (`boolean`, default: true) Lazy load child nodes on demand (expand node). ```typescript let treeView = new TreeView({ fields: { dataSource: data, id: 'id', text: 'name', child: 'child', hasChildren: 'hasChild' }, loadOnDemand: true // Load children on expand }); ``` #### Expansion & Interaction Properties **17. expandOn** (`ExpandOnSettings`, default: 'Auto') Action that expands/collapses nodes: Auto, Click, DblClick, None. ```typescript let treeView = new TreeView({ fields: { dataSource: data, id: 'id', text: 'name', child: 'child' }, expandOn: 'Click' // Single click to expand, double click to collapse }); ``` **18. sortOrder** (`SortOrder`, default: 'None') Sort order for nodes: None, Ascending, Descending. ```typescript let treeView = new TreeView({ fields: { dataSource: data, id: 'id', text: 'name', child: 'child' }, sortOrder: 'Ascending' // Sort nodes alphabetically }); ``` **19. dragArea** (`HTMLElement | string`, default: null) Target element for drag and drop restriction. ```typescript let treeView = new TreeView({ fields: { dataSource: data, id: 'id', text: 'name', child: 'child' }, allowDragAndDrop: true, dragArea: '#dragContainer' // Restrict drag to this element }); ``` #### Appearance & HTML Properties **20. animation** (`NodeAnimationSettingsModel`) Animation settings for expand/collapse. ```typescript let treeView = new TreeView({ fields: { dataSource: data, id: 'id', text: 'name', child: 'child' }, animation: { expand: { effect: 'SlideDown', duration: 400, easing: 'linear' }, collapse: { effect: 'SlideUp', duration: 400, easing: 'linear' } } }); ``` **21. cssClass** (`string`, default: '') Custom CSS class for TreeView styling. ```typescript let treeView = new TreeView({ fields: { dataSource: data, id: 'id', text: 'name', child: 'child' }, cssClass: 'custom-tree' // Apply custom CSS }); // CSS // .custom-tree .e-text-content { color: #333; font-weight: bold; } ``` **22. nodeTemplate** (`string | Function`, default: null) Custom template for rendering nodes. ```typescript let treeView = new TreeView({ fields: { dataSource: data, id: 'id', text: 'name', child: 'child' }, nodeTemplate: '<div class="node-content">${name}</div>' }); // Or with function let treeView = new TreeView({