syncfusion-blazor-dropdown-tree

Implementing Syncfusion Blazor Dropdown Tree Component

The Blazor Dropdown Tree component is a hierarchical data selection control that displays tree-structured data in a dropdown popup. It supports local and remote data binding, single and multi-selection modes, checkboxes, filtering, custom templates, and comprehensive event handling.

When to Use This Skill

• Display hierarchical data in a compact dropdown format
• Single selection: Allow users to select one item from a tree structure (default mode)
• Multi-selection: Enable selection of multiple tree nodes using CTRL+SHIFT shortcuts
• Checkbox selection: Provide checkbox-based multi-selection with dependent state management
• Filter tree data: Implement search functionality to filter nodes by text
• Remote data sources: Bind to OData, OData V4, Web API, or custom service endpoints
• Custom templates: Personalize item display, selected value display, and popup header
• Handle events: Respond to lifecycle events, selection changes, popup actions
• Form validation: Integrate with form validation frameworks
• Styling and appearance: Apply CSS classes, disabled states, and theme customization

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation and NuGet package setup
• Web and Server app configuration
• Basic component initialization
• Data binding fundamentals
• First working example

Selection and Modes

📄 Read: references/selection-and-modes.md

• Single selection (default behavior)
• Multi-selection with AllowMultiSelection property
• Keyboard shortcuts (CTRL, SHIFT)
• Preselected values and dynamic selection
• Getting selected values with @bind-Value
• Clearing selection

Checkbox Features

📄 Read: references/checkbox-features.md

• ShowCheckBox property for multi-item selection
• AutoUpdateCheckState for dependent parent-child relationships
• ShowSelectAll for selecting/deselecting all nodes
• SelectAllAsync and programmatic selection methods

Data Binding and Remote Data

📄 Read: references/data-binding-operations.md

• Local data binding (hierarchical and self-referential)
• ExpandoObject and DynamicObject binding
• Remote data with ODataAdaptor, ODataV4Adaptor, WebApiAdaptor
• Entity Framework integration
• Observable collections with dynamic data updates
• Load on Demand for large datasets
• Adding/removing items dynamically
• GetTreeViewData method for retrieving node information

Events and Callbacks

📄 Read: references/events-callbacks.md

• Lifecycle events (Created, Destroyed)
• Popup events (OnPopupOpen, OnPopupClose)
• Selection events (ValueChanging, ValueChanged)
• Filtering event with custom filters
• OnActionFailure for error handling
• Event handlers and async support

Filtering and Search

📄 Read: references/filtering-search.md

• AllowFiltering property to enable search
• FilterType options (StartsWith, EndsWith, Contains)
• IgnoreCase for case-insensitive filtering
• FilterBarPlaceholder customization
• Minimum filter length implementation

Sorting

📄 Read: references/sorting.md

• SortOrder property (None, Ascending, Descending)
• Dynamic sorting updates

Templates and Customization

📄 Read: references/templates-customization.md

• ItemTemplate for custom node rendering
• ValueTemplate for selected value display
• HeaderTemplate for popup header customization
• Advanced styling and layout patterns

Styling and Appearance

📄 Read: references/styling-appearance.md

• Disabled state configuration
• CssClass property with predefined classes (e-success, e-warning, e-error, e-outline)
• PopupWidth and PopupHeight customization
• ZIndex for layer management
• Theme support and responsive design

Form Validation and Configuration

📄 Read: references/validation-localization.md

• Form validation integration
• Value binding in forms
• Localization support
• PopupSettings configuration
• Accessibility and placeholder settings

Quick Start Example

@using Syncfusion.Blazor.Navigations

<SfDropDownTree TItem="EmployeeData" TValue="string" 
    Placeholder="Select an employee" 
    Width="500px">
    <DropDownTreeField TItem="EmployeeData" 
        DataSource="Data" 
        ID="Id" 
        Text="Name" 
        HasChildren="HasChild" 
        ParentID="PId">
    </DropDownTreeField>
</SfDropDownTree>

@code {
    List<EmployeeData> Data = new List<EmployeeData>
    {
        new EmployeeData() { Id = "1", Name = "Steven Buchanan", Job = "General Manager", HasChild = true, Expanded = true },
        new EmployeeData() { Id = "2", PId = "1", Name = "Laura Callahan", Job = "Product Manager", HasChild = true },
        new EmployeeData() { Id = "3", PId = "2", Name = "Andrew Fuller", Job = "Team Lead", HasChild = true },
        new EmployeeData() { Id = "4", PId = "3", Name = "Anne Dodsworth", Job = "Developer" },
    };

    public class EmployeeData
    {
        public string? Id { get; set; }
        public string? Name { get; set; }
        public string? Job { get; set; }
        public bool HasChild { get; set; }
        public bool Expanded { get; set; }
        public string? PId { get; set; }
    }
}

Common Patterns

Pattern 1: Multi-Selection with Checkboxes

Enable checkbox-based selection with automatic parent-child state management:

<SfDropDownTree TItem="EmployeeData" TValue="string" 
    ShowCheckBox="true" 
    AutoUpdateCheckState="true"
    ShowSelectAll="true">
    <DropDownTreeField TItem="EmployeeData" DataSource="Data" 
        ID="Id" Text="Name" HasChildren="HasChild" ParentID="PId">
    </DropDownTreeField>
</SfDropDownTree>

Pattern 2: Preselected Values

Set default selected nodes using @bind-Value with AllowMultiSelection:

<SfDropDownTree TItem="EmployeeData" TValue="string" 
    AllowMultiSelection="true"
    @bind-Value="@SelectedIds">
    <DropDownTreeField TItem="EmployeeData" DataSource="Data" 
        ID="Id" Text="Name" HasChildren="HasChild" ParentID="PId">
    </DropDownTreeField>
</SfDropDownTree>

@code {
    List<string> SelectedIds = new List<string>() { "1", "5" };
}

Pattern 3: Search with Filtering

Enable search functionality with custom filter types:

<SfDropDownTree TItem="EmployeeData" TValue="string" 
    AllowFiltering="true"
    FilterType="FilterType.Contains"
    FilterBarPlaceholder="Search employees...">
    <DropDownTreeField TItem="EmployeeData" DataSource="Data" 
        ID="Id" Text="Name" HasChildren="HasChild" ParentID="PId">
    </DropDownTreeField>
</SfDropDownTree>

Pattern 4: Remote Data Binding (OData)

Bind to remote OData services with DataManager:

<SfDropDownTree TValue="int?" TItem="TreeData" Placeholder="Select an employee" Width="500px">
    <DropDownTreeField TItem="TreeData" Query="@Query" 
        ID="EmployeeID" Text="FirstName" ParentID="ReportsTo" HasChildren="HasChildren">
        <SfDataManager Url="url" 
            Adaptor="Syncfusion.Blazor.Adaptors.ODataV4Adaptor" 
            CrossDomain="true">
        </SfDataManager>
    </DropDownTreeField>
</SfDropDownTree>

@code {
    public Query Query = new Query();
}

Key Properties and APIs

Property	Type	Description
TItem	Generic	Model class for data items
TValue	Generic	Type of selected value(s)
Value	List	Two-way bindable selected values
DataSource	IEnumerable	Local data source (via DropDownTreeField)
AllowMultiSelection	bool	Enable multi-node selection
ShowCheckBox	bool	Display checkboxes for selection
AutoUpdateCheckState	bool	Auto-sync parent-child checkbox states
ShowSelectAll	bool	Display select/deselect all checkbox
AllowFiltering	bool	Enable search filtering
FilterType	FilterType	Filter matching strategy (StartsWith, EndsWith, Contains)
IgnoreCase	bool	Case-insensitive filtering
LoadOnDemand	bool	Lazy-load child nodes on expand
Placeholder	string	Input placeholder text
Width	string	Component width
PopupWidth	string	Dropdown popup width
PopupHeight	string	Dropdown popup height
ZIndex	int	CSS z-index of popup
CssClass	string	Custom CSS classes
Disabled	bool	Disable component interaction

Key Events

• Created: Component initialization complete
• Destroyed: Component destruction
• OnPopupOpen: Popup opened after animation
• OnPopupClose: Popup closed after animation
• ValueChanging: Before value change (DdtChangeEventArgs)
• ValueChanged: After value change (List)
• Filtering: Search text entered (DdtFilteringEventArgs)
• OnActionFailure: Error during data operations

Key Methods

• SelectAllAsync(): Programmatically select all nodes
• SelectAllAsync(false): Programmatically deselect all nodes
• ClearAsync(): Clear all selected values
• GetTreeViewData(id): Get node information by ID