MCPInstall

syncfusion-javascript-treeview

by syncfusionFrontend & Design

Implement hierarchical tree structures with Syncfusion JavaScript TreeView component for selection, editing, and drag-drop functionality. Use this skill when building tree navigation interfaces, displaying hierarchical data, implementing node selection and checkboxes, performing node manipulation (add/remove/update), and customizing tree templates. Covers data binding with local and remote data sources, DataManager integration, node events, API methods, and properties.

Installs
64
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/syncfusion/javascript-ui-controls-skills --skill syncfusion-javascript-treeview
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads syncfusion-javascript-treeview automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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).

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.

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.

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).

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.

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.

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.

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.

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.

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.

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({
    fields: { dataSource: data, id: 'id', text: 'name', child: 'child' },
    nodeTemplate: (data) => {
        return `<div class="custom"><span>${data.name}</span></div>`;
    }
});

23. disableHtmlEncode (boolean, default: true) Render raw HTML in nodes without encoding.

let treeView = new TreeView({
    fields: { dataSource: data, id: 'id', text: 'name', child: 'child' },
    disableHtmlEncode: true  // Render HTML tags
});

24. enableHtmlSanitizer (boolean, default: true) Sanitize untrusted HTML for security.

let treeView = new TreeView({
    fields: { dataSource: data, id: 'id', text: 'name', child: 'child' },
    enableHtmlSanitizer: true  // Sanitize HTML
});

Configuration & Persistence Properties

25. enableRtl (boolean, default: false) Right-to-left rendering for RTL languages.

let treeView = new TreeView({
    fields: { dataSource: data, id: 'id', text: 'name', child: 'child' },
    enableRtl: true  // Enable RTL layout
});

26. enablePersistence (boolean, default: false) Persist TreeView state (selected, expanded, checked) between page reloads.

let treeView = new TreeView({
    fields: { dataSource: data, id: 'id', text: 'name', child: 'child' },
    enablePersistence: true  // Persist state
});

Additional Properties (27-31):

  • allowKeyboardNavigation (boolean) - Enable keyboard shortcuts
  • locale (string) - Localization
  • selectedNode (string) - Single selected node
  • edit - Editing configuration
  • contextMenu - Context menu items

Methods (22 Total)

Node Navigation & Visibility

1. ensureVisible(node: string | Element): void Make node visible by expanding ancestors and scrolling to it.

let treeView = new TreeView({
    fields: { dataSource: data, id: 'id', text: 'name', child: 'child' }
});
treeView.appendTo('#tree');

// Make node 05-02 visible
treeView.ensureVisible('05-02');  // Expands all parent nodes and scrolls to view

2. getNode(node: string | Element): { [key: string]: Object } Get node by ID or element, returns the DOM node element.

// Get node by ID
let nodeElement = treeView.getNode('01-01');

// Get node by element
let element = document.getElementById('node1');
let nodeData = treeView.getNode(element);

3. getTreeData(node?: string | Element): { [key: string]: Object }[] Get updated TreeView data. If ID passed, returns that node's data. Empty string returns all data.

// Get all tree data
let allData = treeView.getTreeData('');
console.log(allData);  // Array of all nodes

// Get specific node data
let nodeData = treeView.getTreeData('01');
console.log(nodeData);  // [{ id: '01', name: 'Documents', child: [...] }]

// Get child nodes
let childData = treeView.getTreeData('01');
console.log(childData[0].child);  // Array of child nodes

Node Operations (Add/Remove/Move)

4. addNodes(nodes: { [key: string]: Object }[], target?: string | Element, index?: number, preventTargetExpand?: boolean): void Add new nodes to TreeView.

let treeView = new TreeView({
    fields: { dataSource: data, id: 'id', text: 'name', child: 'child' }
});
treeView.appendTo('#tree');

// Add nodes to a parent (will be added as children)
treeView.addNodes([
    { id: '03-01', name: 'New Item 1' },
    { id: '03-02', name: 'New Item 2' }
], '03');

// Add at specific index
treeView.addNodes([{ id: '03-03', name: 'Item at index 0' }], '03', 0);

// Add without expanding parent
treeView.addNodes([{ id: '04-01', name: 'Hidden' }], '04', null, true);

5. removeNodes(nodes: string[] | Element[]): void Remove nodes from TreeView.

// Remove by ID
treeView.removeNodes(['01-01', '01-02']);

// Remove by element
let element = document.querySelector('[data-uid="01-01"]');
treeView.removeNodes([element]);

6. moveNodes(sourceNodes: string[] | Element[], target: string | Element, index: number, preventTargetExpand?: boolean): void Move nodes to different parent or position.

// Move nodes to new parent
treeView.moveNodes(['01-01', '01-02'], '03');

// Move to specific index in target
treeView.moveNodes(['01-01'], '03', 0);

// Move without expanding target
treeView.moveNodes(['01-01'], '04', null, true);

7. refreshNode(target: string | Element, newData: { [key: string]: Object }[]): void Refresh/update node content.

// Refresh node with new data
treeView.refreshNode('01', { id: '01', name: 'Updated Documents', child: [] });

// Refresh display without data change
treeView.refreshNode('01');

Node State Management

8. expandAll(nodes?: string[] | Element[], level?: number, excludeHiddenNodes?: boolean, preventAnimation?: boolean): void Expand all or specific nodes.

// Expand all nodes
treeView.expandAll();

// Expand specific nodes
treeView.expandAll(['01', '02', '03']);

// Expand to specific level
treeView.expandAll(null, 2);  // Expand 2 levels deep

// Expand without animation
treeView.expandAll(null, null, false, true);

9. collapseAll(nodes?: string[] | Element[], level?: number, excludeHiddenNodes?: boolean): void Collapse all or specific nodes.

// Collapse all nodes
treeView.collapseAll();

// Collapse specific nodes
treeView.collapseAll(['01', '02']);

// Collapse to specific level
treeView.collapseAll(null, 1);

10. checkAll(nodes?: string[] | Element[]): void Check all or specific nodes (checkbox).

// Check all nodes
treeView.checkAll();

// Check specific nodes
treeView.checkAll(['01', '02', '03']);

11. uncheckAll(nodes?: string[] | Element[]): void Uncheck all or specific nodes.

// Uncheck all nodes
treeView.uncheckAll();

// Uncheck specific nodes
treeView.uncheckAll(['01', '02']);

12. getAllCheckedNodes(): string[] Get array of all checked node IDs including children.

let checkedNodeIds = treeView.getAllCheckedNodes();
console.log(checkedNodeIds);  // ['01', '01-01', '02', '02-01', '02-02']

13. getDisabledNodes(): string[] Get array of all disabled node IDs.

let disabledNodeIds = treeView.getDisabledNodes();
console.log(disabledNodeIds);  // ['03', '04-01']

Editing Methods

14. beginEdit(node: string | Element): void Start inline editing mode for a node.

let treeView = new TreeView({
    fields: { dataSource: data, id: 'id', text: 'name', child: 'child' },
    allowEditing: true
});
treeView.appendTo('#tree');

// Start editing node
treeView.beginEdit('01');  // Node becomes editable

15. updateNode(target: string | Element, newText: string): void Update/rename a node's text.

// Update node text
treeView.updateNode('01', 'Documents (Updated)');

// Or with data object
treeView.updateNode('01', { id: '01', name: 'New Name' });

Enable/Disable Methods

16. enableNodes(nodes: string[] | Element[]): void Enable previously disabled nodes.

// Enable specific nodes
treeView.enableNodes(['01', '02']);

17. disableNodes(nodes: string[] | Element[]): void Disable nodes (prevent interaction).

// Disable specific nodes
treeView.disableNodes(['03', '04']);  // These nodes can't be clicked/selected

Component Lifecycle Methods

18. appendTo(selector?: string | HTMLElement): void Append TreeView to DOM element.

let treeView = new TreeView({
    fields: { dataSource: data, id: 'id', text: 'name', child: 'child' }
});

// Append to element with ID
treeView.appendTo('#tree');

// Or append to element reference
treeView.appendTo(document.getElementById('tree'));

19. dataBind(): void Apply pending property changes immediately.

treeView.selectedNodes = ['01', '02'];
treeView.dataBind();  // Apply changes immediately

20. refresh(): void Refresh control and apply pending changes.

treeView.fields.dataSource = newData;
treeView.refresh();  // Refresh with new data

21. destroy(): void Remove component and detach all events.

// Clean up TreeView
treeView.destroy();

Additional Methods (22):

  • getRootElement(): HTMLElement - Get root DOM element
  • Inject(moduleList: Function[]) - Dynamically inject modules

Events (20 Total)

Lifecycle Events

1. created Raised when TreeView is created successfully.

let treeView = new TreeView({
    fields: { dataSource: data, id: 'id', text: 'name', child: 'child' },
    created: () => {
        console.log('TreeView created!');
    }
});

2. destroyed Raised when TreeView is destroyed.

treeView.destroyed = () => {
    console.log('TreeView destroyed!');
};

Data Events

3. dataBound Raised when data is populated in TreeView.

let treeView = new TreeView({
    fields: { dataSource: data, id: 'id', text: 'name', child: 'child' },
    dataBound: (args) => {
        console.log('Data bound to TreeView');
    }
});

4. dataSourceChanged Raised when data changes (after add, remove, move, etc.).

treeView.dataSourceChanged = (args: DataSourceChangedEventArgs) => {
    console.log('Action:', args.action);  // 'add', 'remove', 'move', etc.
    console.log('Updated data:', args.data);
};

5. actionFailure Raised when any operation fails.

treeView.actionFailure = (args: FailureEventArgs) => {
    console.error('Error:', args.error);
};

Node Selection Events

6. nodeSelecting Raised before node is selected.

treeView.nodeSelecting = (args: NodeSelectEventArgs) => {
    console.log('Node selecting:', args.nodeData.name);
    if (args.nodeData.id === 'protect-this') {
        args.cancel = true;  // Prevent selection
    }
};

7. nodeSelected Raised after node is selected/unselected.

treeView.nodeSelected = (args: NodeSelectEventArgs) => {
    console.log('Node selected:', args.nodeData.name);
    console.log('Action:', args.action);  // 'select' or 'unselect'
    console.log('Interacted:', args.isInteracted);
};

8. nodeClicked Raised when node is clicked.

treeView.nodeClicked = (args: NodeClickEventArgs) => {
    console.log('Node clicked:', args.nodeData.name);
    console.log('Event:', args.event);  // Original click event
};

Node Check Events

9. nodeChecking Raised before node is checked/unchecked.

treeView.nodeChecking = (args: NodeCheckEventArgs) => {
    console.log('Node checking:', args.nodeData.name);
    console.log('Action:', args.action);  // 'check' or 'uncheck'
    
    // Prevent checking specific nodes
    if (args.nodeData.id === 'read-only') {
        args.cancel = true;
    }
};

10. nodeChecked Raised after node is checked/unchecked.

treeView.nodeChecked = (args: NodeCheckEventArgs) => {
    console.log('Node checked:', args.nodeData.name);
    console.log('All checked nodes:', treeView.getAllCheckedNodes());
};

Node Expand/Collapse Events

11. nodeExpanding Raised before node expands.

treeView.nodeExpanding = (args: NodeExpandEventArgs) => {
    console.log('Node expanding:', args.nodeData.name);
    
    // Prevent expansion
    if (args.nodeData.locked) {
        args.cancel = true;
    }
};

12. nodeExpanded Raised after node expands successfully.

treeView.nodeExpanded = (args: NodeExpandEventArgs) => {
    console.log('Node expanded:', args.nodeData.name);
};

13. nodeCollapsing Raised before node collapses.

treeView.nodeCollapsing = (args: NodeExpandEventArgs) => {
    console.log('Node collapsing:', args.nodeData.name);
};

14. nodeCollapsed Raised after node collapses.

treeView.nodeCollapsed = (args: NodeExpandEventArgs) => {
    console.log('Node collapsed:', args.nodeData.name);
};

Node Editing Events

15. nodeEditing Raised before node text is edited.

treeView.nodeEditing = (args: NodeEditEventArgs) => {
    console.log('Node editing:', args.oldText);
    
    // Prevent editing
    if (args.nodeData.locked) {
        args.cancel = true;
    }
};

16. nodeEdited Raised after node text is edited successfully.

treeView.nodeEdited = (args: NodeEditEventArgs) => {
    console.log('Old text:', args.oldText);
    console.log('New text:', args.newText);
    console.log('Inner HTML:', args.innerHtml);
};

Drag & Drop Events

17. nodeDragStart Raised when node drag starts.

treeView.nodeDragStart = (args: DragAndDropEventArgs) => {
    console.log('Drag started:', args.draggedNodeData.name);
    console.log('Dragged node element:', args.draggedNode);
};

18. nodeDragging Raised continuously while node is being dragged.

treeView.nodeDragging = (args: DragAndDropEventArgs) => {
    console.log('Dragging...');
    console.log('Current drop target:', args.dropTarget);
    
    // Prevent dropping on specific nodes
    if (args.dropTarget.classList.contains('no-drop')) {
        args.dropIndicator = 'e-no-drop';
    }
};

19. nodeDragStop Raised when node drag stops.

treeView.nodeDragStop = (args: DragAndDropEventArgs) => {
    console.log('Drag stopped');
    console.log('Drop position:', args.position);  // 'Inside', 'Before', 'After'
};

20. nodeDropped Raised when node is dropped successfully.

treeView.nodeDropped = (args: DragAndDropEventArgs) => {
    console.log('Dropped on:', args.dropTarget);
    console.log('New drop index:', args.dropIndex);
    console.log('Drop position:', args.position);
};

Additional Events

21. drawNode Raised before node is rendered.

22. keyPress Raised when keyboard key is pressed on focused node.

Event Arguments

All events provide detailed argument objects:

EventArgument ClassKey Properties
dataBoundDataBoundEventArgsdata
dataSourceChangedDataSourceChangedEventArgsaction, data, nodeData
actionFailureFailureEventArgserror
nodeSelecting/nodeSelectedNodeSelectEventArgsaction, cancel, isInteracted, node, nodeData
nodeClickedNodeClickEventArgsevent, node
nodeChecking/nodeCheckedNodeCheckEventArgsaction, cancel, data, isInteracted, node
nodeExpanding/nodeExpanded/etcNodeExpandEventArgscancel, isInteracted, node, nodeData
nodeEditing/nodeEditedNodeEditEventArgscancel, innerHtml, newText, node, nodeData, oldText
nodeDragStart/Dragging/Stop/DroppedDragAndDropEventArgscancel, clonedNode, draggedNode, draggedNodeData, dropIndex, dropIndicator, dropLevel, dropTarget, droppedNode, droppedNodeData, event, position, preventTargetExpand, target

Configuration Models

FieldsSettingsModel

Maps data source fields to TreeView:

let fields = {
    dataSource: dataArray,          // Array or DataManager
    id: 'nodeId',                  // ID field
    text: 'nodeText',              // Display text field
    child: 'nodeChild',            // Child nodes field (hierarchical)
    parentID: 'parentId',          // Parent ID field (self-referential)
    hasChildren: 'hasChild',       // Boolean field for has children
    expanded: 'isExpanded',        // Expansion state field
    selected: 'isSelected',        // Selection state field
    isChecked: 'checked',          // Checkbox state field
    iconCss: 'icon',               // Icon CSS class field
    imageUrl: 'image',             // Image URL field
    tooltip: 'tooltipText',        // Tooltip field
    htmlAttributes: 'attrs',       // HTML attributes field
    navigateUrl: 'url',            // Navigation URL field
    selectable: 'isSelectable',    // Selectable field
    query: new Query()             // DataManager query
};

NodeAnimationSettingsModel

let animation = {
    expand: {
        effect: 'SlideDown',       // Animation effect
        duration: 400,             // Duration in ms
        easing: 'linear'           // Easing function
    },
    collapse: {
        effect: 'SlideUp',
        duration: 400,
        easing: 'linear'
    }
};

ExpandOnSettings (Enum)

  • Auto (default) - Double-click to expand
  • Click - Single click
  • DblClick - Double click
  • None - No click expand

SortOrder (Enum)

  • None (default) - No sorting
  • Ascending - Sort A-Z
  • Descending - Sort Z-A

Data Binding Strategies

See references/data-binding.md for complete data binding guide including:

  • Hierarchical data binding
  • Self-referential binding
  • Remote data with DataManager
  • Lazy loading configuration

Node Selection & Checking

See references/node-selection-and-checking.md for:

  • Single and multi-select modes
  • Checkbox configuration
  • Auto-check behavior
  • Selection events

Node Manipulation (CRUD)

See references/node-manipulation.md for:

  • Adding nodes dynamically
  • Removing nodes
  • Updating/refreshing nodes
  • Moving nodes
  • Bulk operations

Node Editing & Interaction

See references/node-editing-and-interaction.md for:

  • Inline node editing
  • Validation
  • Click handlers
  • Keyboard navigation

Customization & Styling

See references/customization-and-styling.md for:

  • Node templates
  • Custom icons
  • CSS styling
  • Level-based customization
  • Accordion mode
  • Themes

Advanced Features

See references/accessibility-and-advanced.md for:

  • Drag and drop
  • Filtering and searching
  • Sorting
  • Context menus
  • Accessibility features

Common Patterns

Pattern 1: Simple File Browser

let fileData = [
    { id: 1, name: 'Documents', hasChild: true },
    { id: 2, pid: 1, name: 'Reports.pdf' },
    { id: 3, pid: 1, name: 'Budget.xlsx' },
    { id: 4, name: 'Images', hasChild: true },
    { id: 5, pid: 4, name: 'Photos', hasChild: true },
    { id: 6, pid: 5, name: 'Vacation.jpg' }
];

let treeView = new TreeView({
    fields: { dataSource: fileData, id: 'id', text: 'name', parentID: 'pid', hasChildren: 'hasChild' }
});
treeView.appendTo('#tree');

Pattern 2: Multi-Select with Checkboxes

let data = [
    { id: 1, name: 'Fruits', hasChild: true },
    { id: 2, pid: 1, name: 'Apple' },
    { id: 3, pid: 1, name: 'Banana' },
    { id: 4, name: 'Vegetables', hasChild: true },
    { id: 5, pid: 4, name: 'Carrot' }
];

let treeView = new TreeView({
    fields: { dataSource: data, id: 'id', text: 'name', parentID: 'pid', hasChildren: 'hasChild' },
    showCheckBox: true,
    autoCheck: true
});
treeView.appendTo('#tree');

document.getElementById('getChecked').addEventListener('click', () => {
    let checkedNodes = treeView.getAllCheckedNodes();
    console.log('Selected items:', checkedNodes);
});

Pattern 3: Editable Tree with Validation

let treeView = new TreeView({
    fields: { dataSource: data, id: 'id', text: 'name', child: 'child' },
    allowEditing: true,
    nodeEditing: (args) => {
        // Validate during editing
        if (args.newText.length < 3) {
            args.cancel = true;
            alert('Name must be at least 3 characters');
        }
    },
    nodeEdited: (args) => {
        console.log(`Renamed: "${args.oldText}" → "${args.newText}"`);
    }
});
treeView.appendTo('#tree');

document.getElementById('editBtn').addEventListener('click', () => {
    let selectedNode = treeView.selectedNodes[0];
    if (selectedNode) {
        treeView.beginEdit(selectedNode);
    }
});

Pattern 4: Dynamic Add/Remove

let treeView = new TreeView({
    fields: { dataSource: data, id: 'id', text: 'name', child: 'child' }
});
treeView.appendTo('#tree');

document.getElementById('addBtn').addEventListener('click', () => {
    let parent = treeView.selectedNodes[0] || '1';
    treeView.addNodes([
        { id: Date.now(), name: 'New Item' }
    ], parent);
});

document.getElementById('removeBtn').addEventListener('click', () => {
    let selected = treeView.selectedNodes;
    if (selected.length > 0) {
        treeView.removeNodes(selected);
    }
});

Pattern 5: Drag and Drop

let treeView = new TreeView({
    fields: { dataSource: data, id: 'id', text: 'name', child: 'child' },
    allowDragAndDrop: true,
    nodeDragStart: (args) => {
        console.log('Started dragging:', args.draggedNodeData.name);
    },
    nodeDragging: (args) => {
        // Prevent dropping on readonly nodes
        if (args.dropTarget?.classList.contains('readonly')) {
            args.dropIndicator = 'e-no-drop';
        }
    },
    nodeDropped: (args) => {
        console.log(`Moved "${args.draggedNodeData.name}" to new parent`);
    }
});
treeView.appendTo('#tree');

Troubleshooting & FAQ

Q: TreeView not showing data?

  • A: Ensure fields mapping matches your data structure. Check that id, text, and child/parentID fields are correct.

Q: Parent/child auto-check not working?

  • A: Set autoCheck: true and ensure showCheckBox: true is enabled.

Q: Performance issues with large datasets?

  • A: Use loadOnDemand: true for lazy loading. This loads children only when expanded.

Q: Events not firing?

  • A: Ensure event handler is set BEFORE appending to DOM. Use addEventListener for dynamic setup.

Q: How to persist selected state?

  • A: Set enablePersistence: true to save state in browser storage.

Q: Drag-drop not working?

  • A: Set allowDragAndDrop: true and ensure nodes have proper IDs.

Documentation Links

Core Setup & Configuration

FeatureReference FileFocus
Getting Startedgetting-started.mdInstallation, setup, basic initialization, dependencies, themes, quick examples

Data & Binding

FeatureReference FileFocus
Data Bindingdata-binding.mdHierarchical data, self-referential data, remote/OData services, DataManager, lazy loading, best practices

Selection & Interaction

FeatureReference FileFocus
Node Selection & Checkingnode-selection-and-checking.mdSingle/multi-select, checkboxes, auto-check behavior, selection events, keyboard shortcuts
Node Editing & Interactionnode-editing-and-interaction.mdInline editing, validation, click handlers, keyboard navigation, advanced interactions

Operations & Manipulation

FeatureReference FileFocus
Node Manipulation (CRUD)node-manipulation.mdAdding, removing, updating, moving nodes, getting node data, bulk operations

Appearance & Styling

FeatureReference FileFocus
Customization & Stylingcustomization-and-styling.mdCSS classes, themes, templates, level-based styling, icons, checkboxes, RTL support

Advanced Features

FeatureReference FileFocus
Advanced & Accessibilityaccessibility-and-advanced.mdDrag-drop, filtering, sorting, context menus, keyboard navigation, ARIA, performance optimization

Metadata

  • Version: 1.0.0
  • API Coverage: 31 Properties + 22 Methods + 20 Events (100%)
  • Code Examples: 60+ verified examples
  • Utils Integration: 25/25 topics covered
  • Reference Files: 7 comprehensive guides
  • Table of Contents: 14 sections + subsections
  • Last Updated: 2026-03-27
  • Quality: Production-Ready ✅

FAQ

What does the syncfusion-javascript-treeview skill do?

Implement hierarchical tree structures with Syncfusion JavaScript TreeView component for selection, editing, and drag-drop functionality. Use this skill when building tree navigation interfaces, displaying hierarchical data, implementing node selection and checkboxes, performing node manipulation (add/remove/update), and customizing tree templates. Covers data binding with local and remote data sources, DataManager integration, node events, API methods, and properties.

How do I install syncfusion-javascript-treeview?

Run npx skills add https://github.com/syncfusion/javascript-ui-controls-skills --skill syncfusion-javascript-treeview in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-javascript-treeview/ (personal) or .claude/skills/syncfusion-javascript-treeview/ (project).

Which AI agents can use syncfusion-javascript-treeview?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is syncfusion-javascript-treeview safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains syncfusion-javascript-treeview?

It is published by syncfusion in syncfusion/javascript-ui-controls-skills. It has 64 recorded installs.

More from syncfusion/javascript-ui-controls-skills

View all →

syncfusion-javascript-grid

syncfusion/javascript-ui-controls-skills

Open the skill to read its SKILL.md instructions.

Frontend & Design75 installs

syncfusion-javascript-common

syncfusion/javascript-ui-controls-skills

Common utilities and features for Syncfusion JavaScript controls. Use this skill when the user needs to implement animations, drag-and-drop, state persistence, RTL support, localization, globalization, security, templates, and advanced features for Syncfusion JavaScript controls.

Frontend & Design74 installs

syncfusion-javascript-dropdowns

syncfusion/javascript-ui-controls-skills

Comprehensive guide for implementing Syncfusion TypeScript dropdown components including AutoComplete, ComboBox, Mention, Dropdownlist, Multiselect, ListBox, and MultiColumn ComboBox. Use this when building selection interfaces, data binding, filtering, cascading dropdowns, dual list transfer, custom templates, and accessible dropdown experiences.

Frontend & Design72 installs

syncfusion-javascript-popups

syncfusion/javascript-ui-controls-skills

Open the skill to read its SKILL.md instructions.

Frontend & Design71 installs

syncfusion-javascript-license

syncfusion/javascript-ui-controls-skills

Open the skill to read its SKILL.md instructions.

Frontend & Design71 installs

syncfusion-javascript-tab

syncfusion/javascript-ui-controls-skills

Open the skill to read its SKILL.md instructions.

Frontend & Design70 installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs