Syncfusion React Dropdown Tree

Implementing Dropdown Tree

The Dropdown Tree component displays hierarchical data in a collapsible tree structure within a dropdown interface. It combines tree navigation with dropdown accessibility, supporting multi-selection via checkboxes, lazy loading for large datasets, comprehensive customization through templates and events, filtering, and full accessibility with RTL and localization support.

When to Use This Skill

Use Dropdown Tree immediately when you need to:

• Display hierarchical data - Show nested categories, organizational structures, file trees, or department hierarchies
• Enable multi-selection - Allow users to select multiple items with checkbox support or keyboard modifiers
• Support lazy loading - Optimize performance with large datasets by loading children on demand
• Customize display - Use templates to format items, headers, footers, selected values, or error states
• Implement filtering - Enable search functionality with configurable filter types (StartsWith, EndsWith, Contains)
• Ensure accessibility - Provide WAI-ARIA compliance, keyboard navigation, and screen reader support
• Support multiple languages - Localize UI with customizable keys and RTL support
• Bind remote data - Integrate with OData, OData V4, Web APIs, or other remote data services
• Handle complex selection logic - Use events, auto-check hierarchy, or selective node disabling

Component Overview

The Dropdown Tree features:

• Hierarchical display: Local (hierarchical/self-referential) and remote data sources with flexible binding
• Multi-selection modes: Checkboxes with auto-check, multi-select with Ctrl/Shift keys, single select (default)
• Flexible templates: Item, value, header, footer, noRecords, and actionFailure templates for custom rendering
• Performance optimization: Lazy loading (load-on-demand) for efficient large dataset handling
• Search & filtering: Built-in filter bar with configurable filter types and case sensitivity options
• Comprehensive events: change, select, dataBound, filtering, beforeOpen, focus, keyPress, and popup events
• Accessibility: Full WAI-ARIA (roles, attributes), keyboard navigation, screen reader support, WCAG 2.2 compliance
• Localization: Multi-language support with 4 customizable keys and locale override
• RTL support: Right-to-left layout rendering
• Tree settings: Advanced configuration (expandOn, autoCheck, loadOnDemand, checkDisabledChildren)
• Field mapping: Flexible data structure support (value, text, child, parentValue, expanded, hasChildren, selectable, iconCss, imageUrl, htmlAttributes)
• Display modes: Default, Delimiter, and Custom modes for selected items

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation and package dependencies (npm install command)
• React/TypeScript project setup (Vite and Create React App)
• Basic component implementation and initialization
• CSS imports and theme configuration
• First render and minimal working example

Data Binding

📄 Read: references/data-binding.md

• Local data binding (hierarchical and self-referential structures)
• Remote data with DataManager and various adaptors (OData, OData V4, WebAPI, URL)
• Field mapping for value, text, child, parentValue, expanded, hasChildren
• Load on demand (lazy loading) for large datasets
• Preventing node selection with selectable field
• Query configuration for remote data services

Checkbox & Multi-Selection

📄 Read: references/checkbox-selection.md

• Enabling checkbox support with showCheckBox property
• Multi-selection workflow and accessing selected values
• Auto-check hierarchical behavior (parent-child synchronization)
• Select All feature with customizable selectAllText and unSelectAllText
• Intermediate checkbox states for partial selection
• CheckDisabledChildren behavior for disabled nodes

Templates

📄 Read: references/templates.md

• Item template for custom list item rendering
• Value template for selected display customization
• Header template for static content above items
• Footer template for static content below items
• NoRecords template for empty state handling
• ActionFailure template for error state handling
• CustomTemplate for multi-select display customization
• Template expression syntax and data access patterns

Multi-Selection & Filtering

📄 Read: references/multi-selection-filtering.md

• allowMultiSelection property and Ctrl/Shift keyboard interaction
• Display modes: Default, Delimiter, Custom
• delimiterChar and mode configuration
• allowFiltering and filter bar implementation
• Filter types: StartsWith, EndsWith, Contains
• filterBarPlaceholder customization
• ignoreCase and ignoreAccent options

Tree Settings & Configuration

📄 Read: references/tree-settings.md

• loadOnDemand for lazy loading implementation
• autoCheck for hierarchical checkbox synchronization
• expandOn behavior (Auto, Click, DblClick, None)
• checkDisabledChildren for disabled node handling
• Tree expansion and collapse control

Field Mapping & Custom Data Structures

📄 Read: references/field-mapping.md

• Core fields: value, text, dataSource, child, parentValue
• Node state fields: expanded, hasChildren, selected, selectable
• Display enhancement fields: iconCss, imageUrl, htmlAttributes
• Query and tableName for remote data
• Nested field mapping for hierarchical data

Advanced Features & API Reference

📄 Read: references/advanced-features.md

• Properties (60+ properties with descriptions and examples)
• Methods (getSelectedNodes, getCheckedNodes, setCheckedNodes, etc.)
• Events (change, select, dataBound, filtering, beforeOpen, focus, keyPress, popup)
• Event arguments (EventArgs structures with property descriptions)
• Styling and CSS customization
• Performance optimization techniques

Accessibility & Localization

📄 Read: references/accessibility-localization.md

• WCAG 2.2 and Section 508 compliance standards
• WAI-ARIA attributes and roles (listbox, treeitem, checkbox, group, etc.)
• Keyboard navigation shortcuts (Alt+Down, Arrow keys, Enter, Space, etc.)
• Screen reader and assistive technology support
• Localization keys (noRecordsTemplate, actionFailureTemplate, overflowCountTemplate, totalCountTemplate)
• Culture customization with locale property
• RTL (Right-to-Left) language support with enableRtl

Quick Start

Basic Dropdown Tree with Hierarchical Data

import { DropDownTreeComponent } from '@syncfusion/ej2-react-dropdowns';
import '@syncfusion/ej2-dropdowns/styles/material.css';

function App() {
  const data = [
    { id: '1', name: 'Electronics', expanded: true },
    { id: '2', name: 'Laptops', parentId: '1' },
    { id: '3', name: 'Phones', parentId: '1' },
    { id: '4', name: 'Appliances' },
  ];

  return (
    <DropDownTreeComponent
      id="dropdowntree"
      fields={{ dataSource: data, value: 'id', text: 'name', parentValue: 'parentId', hasChildren: 'hasChild' }}
      placeholder="Select an item"
    />
  );
}

export default App;

With Checkboxes and Auto-Check

<DropDownTreeComponent
  id="dropdowntree"
  fields={{ dataSource: data, value: 'id', text: 'name', parentValue: 'parentId', hasChildren: 'hasChild' }}
  showCheckBox={true}
  showSelectAll={true}
  treeSettings={{ autoCheck: true }}
  placeholder="Select items"
/>

With Filtering

<DropDownTreeComponent
  id="dropdowntree"
  fields={{ dataSource: data, value: 'id', text: 'name', parentValue: 'parentId' }}
  allowFiltering={true}