Blazor DropDownTree Overview

Updated on Feb 11, 2026

The Blazor DropDownTree component allows users to select a single value from a hierarchical list of dropdown items. The DropDownTree combines features of the DropDownList and the TreeView components. Familiarity with the API of the two originating components is recommended.

Creating Blazor DropDownTree

1. Add the <TelerikDropDownTree> tag to your Razor page.
2. Populate its Data parameter with an IEnumerable<T> of items that you want to appear in the dropdown list. The DropDownTree automatically recognizes property names like Id, Text, Value, and a few others. To use custom property names, set the ValueField parameter, and define bindings for the parent-child relationships.
3. Bind the Value parameter to a variable of the same type as the ValueField property.
4. (optional) Set the ExpandedItems parameter to a non-null IEnumerable<object>. Use it to get the expanded items in the dropdown or set them programmatically.

Basic Blazor DropDownTree

Change Theme

Theme

Loading ...

Data Binding

The Blazor DropDownTree requires a data source to populate its dropdown with items. Set the Data parameter to a generic IEnumerable<T>. The model class can have properties with predefined names or custom names. The data collection can have flat or hierarchical structure.

Filtering

The Blazor DropDownTree can reduce the number of visible items as the user types in a search textbox in the open dropdown. To configure DropDownTree filtering, use the Filterable and FilterOperator parameters. Additionally, you can customize the filter operator and set the minimum required number of typed characters.

Templates

The DropDownTree provides templates that allow you to customize the rendering and appearance of the component value, dropdown header, dropdown footer, TreeView items, and the popup content when there is no data.

Adaptive Rendering

The component supports different popup rendering depending on the screen size. Read more about the Adaptive Rendering functionality and how to enable it...

Events

The Telerik DropDownTree fires events that enable the app to detect and react to user interactions with the component. Find out more about the DropDownTree events and event arguments.

DropDownTree API

Get familiar with all DropDownTree parameters, methods, events, and nested tags in the DropDownTree API Reference.

Popup Settings

The TelerikDropDownTree exposes settings for its dropdown (popup). To configure these options, declare a <DropDownTreePopupSettings> tag inside <DropDownTreeSettings>:

Using DropDownTree popup settings

RAZOR

<TelerikDropDownTree>
    <DropDownTreeSettings>
        <DropDownTreePopupSettings Class="dropdowntree-popup-class"
                                   Height="50vh"
                                   MaxHeight="400px" />
    </DropDownTreeSettings>
</TelerikDropDownTree>

DropDownTree Reference and Methods

Add a reference to the component instance to use the DropDownTree's methods. Note that the DropDownTree is a generic component. Its model type and value type must be part of the component reference definition.

RAZOR

<TelerikDropDownTree @ref="@DropDownTreeRef" />

@code {
    private TelerikDropDownTree<int>? DropDownTreeRef;

    private void OpenDropDownTree()
    {
        DropDownTreeRef?.Open();
    }
}

Next Steps

• Bind the DropDownTree to Data

See Also

• DropDownTree API Reference
• Live Demo: DropDownTree