Introducing the New Blazor Dropdown Tree Component
Tags: blazor, webdev, ui, whatsnew
Published: 2024-02-19 04:07:36

---
title: Introducing the New Blazor Dropdown Tree Component
published: true
date: 2024-01-24 13:55:01 UTC
tags: blazor, webdev, ui, whatsnew
canonical_url: https://www.syncfusion.com/blogs/post/new-blazor-dropdown-tree.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l7t7mr2jyypl37q232r7.png
---
We are happy to introduce the new [Blazor Dropdown Tree](https://www.syncfusion.com/blazor-components/blazor-dropdowntree "Blazor Dropdown Tree Component") component in the [Essential Studio 2023 Volume 4](https://www.syncfusion.com/forums/185916/essential-studio-2023-volume-4-main-release-v24-1-41-is-available-for-download "Essential Studio 2023 Volume 4") release in preview mode. With this control,  you can render hierarchical or self-referential data in a tree-like structure. It supports keyboard interactions, and events, and provides a user-friendly interface optimized for touch interactions.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/01/Blazor-Dropdown-Tree-4.png" alt="Blazor Dropdown Tree" style="width:100%">

  <figcaption>Blazor Dropdown Tree</figcaption>

</figure>

This blog will provide a walk-through of the new Blazor Dropdown Tree component, its UI designs, and its available features.

## Key features

The following is the list of key features available in the Blazor Dropdown Tree component:

- [Data binding](#Data)
- [Checkboxes](#Checkbox)
- [Multi-selection](#Multi)
- [Filtering](#Filtering)
- [Templates](#Templates)
- [Visual mode](#Visual)
- [Load on demand](#Load)
- [Preselected value and text](#Preselected)
- [Float label type](#Float)
- [Customization](#Customization)
- [Form Validation](#Form)

### <a name="Data">Data binding</a>

You can bind hierarchical or self-referential data from local or remote data services and fetch the data using different kinds of adapters like **Odata**, **Odata V4**, **URL**, and **Web API**.

**Note:** Refer to this [documentation](https://blazor.syncfusion.com/documentation/dropdown-tree/data-binding "Data Binding in Blazor Dropdown Tree Component") and [demo](https://blazor.syncfusion.com/demos/dropdown-tree/default-functionalities?theme=fluent "Default Functionalities in Blazor Dropdown Tree Component Live demo") for more details on data binding.

#### Self-referential data binding

The Dropdown Tree can be populated from a self-referential data structure that contains a list of objects with **ParentID** mapping. The self-referential data can be directly assigned to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.DropDownTreeField-1.html#Syncfusion_Blazor_Navigations_DropDownTreeField_1_DataSource "DataSource property of Blazor Dropdown Tree") property. It will map all the field members with corresponding keys from self-referential data to the [Fields] (https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.DropDownTreeField-1.html "Fields property of Blazor Dropdown Tree")  property.

#### Hierarchical data binding

The Dropdown Tree can be populated with a hierarchical data source that contains a nested list of objects. Hierarchical data can be directly assigned to the **DataSource** property. It will map all the field members with corresponding keys from the hierarchical data to the [Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.DropDownTreeField-1.html "DropDownTreeField<TItem> class of Blazor Dropdown Tree") property.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/01/Hierarchical-data-binding-in-Blazor-Dropdown-Tree-2.gif" alt="Hierarchical data binding in Blazor Dropdown Tree" style="width:100%">

  <figcaption>Hierarchical data binding in Blazor Dropdown Tree</figcaption>

</figure>

### <a name="Checkbox">Checkboxes</a>

The Dropdown Tree component allows you to check more than one item from the tree without affecting the UI’s appearance by enabling the [ShowCheckBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_ShowCheckBox "ShowCheckBox property of Blazor Dropdown Tree") property. When this property is enabled, a checkbox appears before each item text in the popup.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/01/Checkbox-feature-in-Blazor-Dropdown-Tree-3.png" alt="Checkbox feature in Blazor Dropdown Tree" style="width:100%">

  <figcaption>Checkbox feature in Blazor Dropdown Tree</figcaption>

</figure>

#### Auto check

By default, the checkbox state of the parent and child items in the Dropdown Tree will not be dependent on each other. If you need a dependent checked state, then enable the [AutoUpdateCheckState](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_AutoUpdateCheckState "AutoUpdateCheckState property of Blazor Dropdown Tree") property.

**Note that:**

- If one or more child items are not in the checked state, then the parent item will be in the intermediate state.
- If all the child items are checked, then the parent item will also be in the checked state.
- If a parent item is checked, then all the child items will also be changed to the checked state.

### <a name="Multi">Multiple selection</a>

The Dropdown Tree also supports the selection of multiple nodes by setting [AllowMultiSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_AllowMultiSelection "AllowMultiSelection property of Blazor Dropdown Tree") to true. To perform a multi-select action, press and hold the **CTRL** key and click the desired nodes. To select a range of nodes, press and hold the **SHIFT** key and click the nodes. To select a node using the keyboard, press the component key and **Enter** / **Space** key.

**Note:** For more details, refer to the [Multi-selection in Blazor Dropdown Tree demo](https://blazor.syncfusion.com/demos/dropdown-tree/selection?theme=fluent "Multi-selection in Blazor Dropdown Tree demo") and [documentation](https://blazor.syncfusion.com/documentation/dropdown-tree/selection "Selection in Blazor Dropdown Tree Component"). 

### <a name="Filtering">Filtering</a>

The Dropdown Tree has built-in support to filter data items when [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_AllowFiltering "AllowFiltering property of Blazor Dropdown Tree") is enabled. The filter operation starts as soon as you start typing characters in the search box. By default, the filtering is disabled.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/01/Filtering-support-in-Blazor-Dropdown-Tree-2.gif" alt="Filtering support in Blazor Dropdown Tree" style="width:100%">

  <figcaption>Filtering support in Blazor Dropdown Tree</figcaption>

</figure>

#### Filter type

You can use the [FilterType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_FilterType "FilterType property for the Blazor Navigation SfDropDown Tree") property to specify which filter type needs to be considered in the search action of the component. The available **FilterTypes** and their supported data types are:
<table style="width: 100%; height: 368px;">
<tbody>
<tr style="height: 68px;">
<td style="height: 68px;" width="312">
<p><strong>FilterType</strong></p>
</td>
<td style="height: 68px;" width="312">
<p><strong>Description</strong></p>
</td>
</tr>
<tr style="height: 100px;">
<td style="height: 100px;" width="312">
<p><a title="StartsWith filter type property of Blazor Dropdown Tree" href="https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_StartsWith" target="_blank" rel="noopener">StartsWith</a></p>
</td>
<td style="height: 100px;" width="312">
<p>Checks whether an item begins with the specified value.</p>
</td>
</tr>
<tr style="height: 100px;">
<td style="height: 100px;" width="312">
<p><a title="EndsWith property of Blazor Dropdown Tree" href="https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_EndsWith" target="_blank" rel="noopener">EndsWith</a></p>
</td>
<td style="height: 100px;" width="312">
<p>Checks whether an item ends with the specified value.</p>
</td>
</tr>
<tr style="height: 100px;">
<td style="height: 100px;" width="312">
<p><a title="Contains property of Blazor Dropdown Tree" href="https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html#Syncfusion_Blazor_DropDowns_FilterType_Contains" target="_blank" rel="noopener">Contains</a></p>
</td>
<td style="height: 100px;" width="312">
<p>Checks whether an item contains the specified value.</p>
</td>
</tr>
</tbody>
</table>
The Data items can be filtered with or without case sensitivity using the [IgnoreCase](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_IgnoreCase "IgnoreCase property of Blazor Dropdown Tree") property. Filtering with diacritic characters or accents is handled using the [IgnoreAccent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_IgnoreAccent "IgnoreAccent property of Blazor Dropdown Tree") property. By default, the **IgnoreAccent** and **IgnoreCase** property are set to **true.**

Refer to the following code example.

```csharp
@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.DropDowns
<SfDropDownTree TItem="EmployeeData" TValue="string" Placeholder="Select an employee" Width="500px"
                AllowFiltering="true" FilterType="FilterType.Contains" IgnoreCase="false" IgnoreAccent="true"
                FilterBarPlaceholder="Find a Employee">
 <DropDownTreeField TItem="EmployeeData" DataSource="Data" ID="Id" Text="Name" HasChildren="HasChild" ParentID="PId">
 </DropDownTreeField>
</SfDropDownTree>
```

Refer to the following image. ![Filter types in Blazor Dropdown Tree](https://www.syncfusion.com/blogs/wp-content/uploads/2024/01/Filterbar-Placeholder-in-Blazor-Dropdown-Tree-1.png)

**Note:** For more details, refer to [Filtering in Blazor Dropdown Tree demo](https://blazor.syncfusion.com/demos/dropdown-tree/filtering?theme=fluent "Filtering in Blazor Dropdown Tree demo") and [documentation](https://blazor.syncfusion.com/documentation/dropdown-tree/filtering "Filtering in Blazor Dropdown Tree documentation").

### <a name="Templates">Templates</a>

The Dropdown Tree lets you customize each list item, header, footer, action, and no records template. Let’s see how to achieve this.

#### Header template

The header element is shown statically at the top of the pop-up list of items within the Dropdown Tree, and any custom element can be placed as a **header** element using the [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_HeaderTemplate "HeaderTemplate property of Blazor Dropdown Tree") property.

#### Footer template

The Dropdown Tree has options to show a footer element at the bottom of the list of items in the popup list. In it, you can place any custom element as a footer element using the [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_FooterTemplate "FooterTemplate property of Blazor Dropdown Tree") property.

In the following code example, **ItemTemplate** , **HeaderTemplate** , and **FooterTemplate** properties are used.

#### Item template

The content of each list item within the Dropdown Tree can be customized with the help of the [ItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_ItemTemplate "ItemTemplate property of Blazor Dropdown Tree") property.

In the following code example, the Dropdown Tree list items are customized with employee information such as name and job using the **ItemTemplate** property. The variable context holds the data of the current node.

```xml
@using Syncfusion.Blazor.Navigations
<SfDropDownTree TItem="EmployeeData" TValue="string" Placeholder="Select an employee" Width="500px" CssClass="custom">
 <ChildContent>
  <DropDownTreeField TItem="EmployeeData" DataSource="Data" ID="Id" Text="Name" HasChildren="HasChild" ParentID="PId"></DropDownTreeField>
 </ChildContent>
 <HeaderTemplate>
  <div class="head"> Employee List </div>
 </HeaderTemplate>
 <ItemTemplate>
  <div>
   <span class="ename">@((context as EmployeeData).Name) - </span>
   <span class="ejob" style="opacity: .60">@((context as EmployeeData).Job)</span>
  </div>
 </ItemTemplate>
 <FooterTemplate>
  <span class='foot'> Total number of employees: @Data?.Count.ToString()</span>
 </FooterTemplate>
</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" },
        new EmployeeData() { Id = "10", PId = "3", Name = "Lilly", Job = "Developer" },
        new EmployeeData() { Id = "5", PId = "1", Name = "Nancy Davolio", Job = "Product Manager", HasChild = true },
        new EmployeeData() { Id = "6", PId = "5", Name = "Michael Suyama", Job = "Team Lead", HasChild = true },
        new EmployeeData() { Id = "7", PId = "6", Name = "Robert King", Job = "Developer" },
        new EmployeeData() { Id = "11", PId = "6", Name = "Mary", Job = "Developer" },
        new EmployeeData() { Id = "9", PId = "1", Name = "Janet Leverling", Job = "HR"}
    };
    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; }
    }
}
<style>
    .custom .head {
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        margin: 0 auto;
        width: 100%;
        padding: 0 20px;
        font-weight: bold;
        border-bottom: 1px solid #e0e0e0;
    }
    .custom .foot {
        line-height: 40px;
        font-size: 14px;
        margin: 0 auto;
        padding: 0 20px;
        font-weight: bold;
    }
    .custom .e-ddt-footer {
        border-top: 1px solid #e0e0e0;
    }
</style>
```

Refer to the following image.
![Templates in Blazor Dropdown Tree](https://www.syncfusion.com/blogs/wp-content/uploads/2024/01/Templates-in-Blazor-Dropdown-Tree-2.png)

#### No records and action failure template

You can customize the design of the popup list content when no data is found on search with the help of the [NoRecordsTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_NoRecordsTemplate "NoRecordsTemplate property of Blazor Dropdown Tree") property. The [ActionFailureTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_ActionFailureTemplate "ActionFailureTemplate property of Blazor Dropdown Tree") property is used to customize the design of the popup list content when the data fetch request fails at the remote server.

**Note:** For more details, refer to [Templates in Blazor Dropdown Tree demo](https://blazor.syncfusion.com/demos/dropdown-tree/customization?theme=fluent "Templates in Blazor Dropdown Tree Live demo") and [documentation.](https://blazor.syncfusion.com/documentation/dropdown-tree/templates "Templates in Blazor Dropdown Tree documentation")

### <a name="Visual">Visual modes</a>

You can change the visual mode of selected items in the text box when **ShowCheckBox** or **AllowMultiSelection** property is enabled. There are three types of visual modes.
<table style="width: 100%; height: 401px;">
<tbody>
<tr style="height: 68px;">
<td style="height: 68px;" width="312">
<p><strong>Mode</strong></p>
</td>
<td style="height: 68px;" width="312">
<p><strong>Description</strong></p>
</td>
</tr>
<tr style="height: 100px;">
<td style="height: 100px;" width="312">
<p><a title="Box property of Blazor Dropdown Tree" href="https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.DdtVisualMode.html#Syncfusion_Blazor_Navigations_DdtVisualMode_Box" target="_blank" rel="noopener">Box</a></p>
</td>
<td style="height: 100px;" width="312">
<p>Selected items will be visualized in chip format.</p>
</td>
</tr>
<tr style="height: 100px;">
<td style="height: 100px;" width="312">
<p><a title="Delimiter property of Blazor Dropdown Tree" href="https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.DdtVisualMode.html#Syncfusion_Blazor_Navigations_DdtVisualMode_Delimiter" target="_blank" rel="noopener">Delimiter</a></p>
</td>
<td style="height: 100px;" width="312">
<p>Selected items will be visualized in the text content.</p>
</td>
</tr>
<tr style="height: 133px;">
<td style="height: 133px;" width="312">
<p><a title="Default property of Blazor Dropdown Tree" href="https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.DdtVisualMode.html#Syncfusion_Blazor_Navigations_DdtVisualMode_Default" target="_blank" rel="noopener">Default</a></p>
</td>
<td style="height: 133px;" width="312">
<p>When focused on, the component will act in the box mode. When blurred, the component will act in delimiter mode.</p>
</td>
</tr>
</tbody>
</table>
Refer to the following code example.

```xml
@using Syncfusion.Blazor.Navigations
<SfDropDownTree TItem="EmployeeData" TValue="string" Placeholder="Select an employee" Width="500px" ShowCheckBox="true" Mode="DdtVisualMode.Box">
 <DropDownTreeField TItem="EmployeeData" DataSource="Data" ID="Id" Text="Name" HasChildren="HasChild" ParentID="PId"></DropDownTreeField>
</SfDropDownTree>
```

Refer to the following image.

![Visual modes in Blazor Dropdown Tree](https://www.syncfusion.com/blogs/wp-content/uploads/2024/01/Visual-modes-in-Blazor-Dropdown-Tree-1.png)

### <a name="Load">Load on demand</a>

The Blazor Dropdown Tree supports the [load-on-demand (Lazy load)](https://blazor.syncfusion.com/documentation/dropdown-tree/data-binding#load-on-demand "Load on demand in Blazor Dropdown Tree") feature. It reduces the bandwidth size when consuming a huge amount of data. It loads first-level nodes initially, and when the parent node is expanded, it loads the child nodes based on the ParentID/Child member. By default, the [LoadOnDemand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_LoadOnDemand "LoadOnDemand property of Blazor Dropdown Tree") is set to **false.**

### <a name="Preselected">Preselected value and text</a>

You set the preselected value using the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_Value "Value property of Blazor Dropdown Tree") and [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_Text "Text property of Blazor Dropdown Tree") properties.

#### Value

It is a two-way binding property. You can set the value in the **List<TValue>** type. You can also add multiple values using this property.

```xml
@using Syncfusion.Blazor.Navigations
<SfDropDownTree TItem="EmployeeData" TValue="string" Placeholder="Select an employee" Width="500px" ShowCheckBox="true" Value="@(new List<string>(){"1"})">
 <DropDownTreeField TItem="EmployeeData" DataSource="Data" ID="Id" Text="Name" HasChildren="HasChild" ParentID="PId"></DropDownTreeField>
</SfDropDownTree>
```

#### Text

You can set the value in string type. To select multiple items, use commas between them.

```xml
@using Syncfusion.Blazor.Navigations
<SfDropDownTree TItem="EmployeeData" TValue="string" Placeholder="Select an employee" Width="500px" ShowCheckBox="true" Text="Steven Buchanan, Nancy Davolio">
 <DropDownTreeField TItem="EmployeeData" DataSource="Data" ID="Id" Text="Name" HasChildren="HasChild" ParentID="PId"></DropDownTreeField>
</SfDropDownTree>
```

### <a name="Float">Float label types</a>

You can set the behavior of the placeholder using the [FloatLabelType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html "FloatLabelType class of Blazor Dropdown Tree") property. By default, **FloatLabelType** is **Never.**

There are three types of float labels.
<table>
<tbody>
<tr>
<td width="312">
<p><strong>Type</strong></p>
</td>
<td width="312">
<p><strong>Description</strong></p>
</td>
</tr>
<tr>
<td width="312">
<p><a title="Always property of Blazor Dropdown Tree" href="https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Always" target="_blank" rel="noopener">Always</a></p>
</td>
<td width="312">
<p>The floating label will always float above the input.</p>
</td>
</tr>
<tr>
<td width="312">
<p><a title="Auto property of Blazor Dropdown Tree" href="https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Auto" target="_blank" rel="noopener">Auto</a></p>
</td>
<td width="312">
<p>The floating label will float above the input after focusing or entering a value in the input.</p>
</td>
</tr>
<tr>
<td width="312">
<p><a title="Never property of Blazor Dropdown Tree" href="https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.FloatLabelType.html#Syncfusion_Blazor_Inputs_FloatLabelType_Never" target="_blank" rel="noopener">Never</a></p>
</td>
<td width="312">
<p>The label will never float in the input when the placeholder is available.</p>
</td>
</tr>
</tbody>
</table>
Refer to the following code example.

```xml
@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Inputs
<SfDropDownTree TItem="EmployeeData" TValue="string" Placeholder="Select an employee" Width="500px" FloatLabelType="FloatLabelType.Auto">
 <DropDownTreeField TItem="EmployeeData" DataSource="Data" ID="Id" Text="Name" HasChildren="HasChild" ParentID="PId"></DropDownTreeField>
</SfDropDownTree>
```

Refer to the following image.

![Floating labels in Blazor Dropdown Tree](https://www.syncfusion.com/blogs/wp-content/uploads/2024/01/item-template-in-Blazor-Dropdown-Tree.png)

### <a name="Customization">Customization</a>

You can customize the popup height and width using [**PopupHeight**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_PopupHeight "PopupHeight property for the Blazor Navigation SfDropDown Tree") and [**PopupWidth**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_PopupWidth "PopupWidth property for the Blazor Navigation SfDropDown Tree") properties. The default value of **_PopupHeight_** is **_300px,_** and **_PopupWidth_** is **_100%_**. You can set the width of the component using the [**Width**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_Width "Width property for the Blazor Navigation SfDropDown Tree") property. The default value is **_100%_**. You can also add additional attributes to the container element using the [**HtmlAttributes**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_HtmlAttributes "HtmlAttributes property for the Blazor Navigation SfDropDown Tree") _property **.** _

Refer to the following code example.

```xml
@using Syncfusion.Blazor.Navigations
<SfDropDownTree TItem="EmployeeData" TValue="string" Placeholder="Select an employee" Width="500px" HtmlAttributes="@htmlAttribute">
 <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" },
        new EmployeeData() { Id = "10", PId = "3", Name = "Lilly", Job = "Developer" },
        new EmployeeData() { Id = "5", PId = "1", Name = "Nancy Davolio", Job = "Product Manager", HasChild = true },
        new EmployeeData() { Id = "6", PId = "5", Name = "Michael Suyama", Job = "Team Lead", HasChild = true },
        new EmployeeData() { Id = "7", PId = "6", Name = "Robert King", Job = "Developer" },
        new EmployeeData() { Id = "11", PId = "6", Name = "Mary", Job = "Developer" },
        new EmployeeData() { Id = "9", PId = "1", Name = "Janet Leverling", Job = "HR"}
    };
     Dictionary<string, object> htmlAttribute = new Dictionary<string, object>()
    {
        {"class", "e-employee" },
        {"style", "background-color: #0bebd6; text-align: right" },
        {"title", "Syncfusion DropDownTree" }
    };
    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; }
    }
}
```

### <a name="Form">Form validations</a>

The Dropdown Tree component can be used inside an **EditForm** to create a form that includes a list for selecting an option. The edit form component validates all data annotation rules using the data annotations validator component. If the Dropdown Tree input is valid, the form is ready to be submitted. If the input is invalid, an error message will be displayed until a valid value is chosen.

**Note:** For more details, refer to the [Form validation in Blazor Dropdown Tree demo](https://blazor.syncfusion.com/demos/dropdown-tree/validation?theme=fluent "Form validation in Blazor Dropdown Tree demo") and [documentation](https://blazor.syncfusion.com/documentation/dropdown-tree/form-validation "Form Validation in Dropdown Tree").

## Use cases

Let’s see some of the use cases of this new component!

### E-commerce category navigation

An online retail store can implement the  Dropdown Tree to organize and display products based on categories and subcategories. This helps users easily navigate through the store’s offerings, finding the products they are interested in efficiently.

### Filtering in e-commerce or search platforms

Online marketplaces or search platforms can use the Dropdown Tree to allow users to filter search results based on various criteria. For example, a travel website might use a dropdown tree to filter destinations by continent, country, and city.

## Upcoming features

The Blazor Dropdown Tree component is now available in preview mode, and we plan to include the following features in our future releases:

- **Custom template** : Customize the selected values.
- **Wrap Text** : To wrap multiple lines in a single node.
- **GetTreeView Data** : To get the complete data of the component.
- **Refresh** : To refresh the component whenever any re-rendering is required.

## How to use it

We have a set of resources for you, including live [demos](https://blazor.syncfusion.com/demos/dropdown-tree/default-functionalities?theme=fluent "Default Functionalities in Blazor Dropdown Tree Component Live demo") and feature guidance in our [documentation](https://blazor.syncfusion.com/documentation/dropdown-tree/getting-started "Getting Started with the Form Validation in Dropdown Tree").

## Conclusion

Thanks for reading! We hope you enjoyed this quick introduction to the design and available features of the new [Blazor Dropdown Tree component](https://www.syncfusion.com/blazor-components/blazor-dropdowntree "Blazor Dropdown Tree Component") available in the [2023 Volume 4](https://www.syncfusion.com/forums/185916/essential-studio-2023-volume-4-main-release-v24-1-41-is-available-for-download "Essential Studio 2023 Volume 4") release. Give it a try, and provide your valuable feedback.

Check out our [Release Notes](https://help.syncfusion.com/common/essential-studio/release-notes/v23.1.36 "Essential Studio Release Notes") and [What’s New](https://www.syncfusion.com/products/whatsnew "Essential Studio What’s New") pages to see other controls and features available with this release. For existing Syncfusion customers, the new version is available on the [License and Downloads](https://www.syncfusion.com/account/login "Essential Studio License and Downloads page") page. If you’re not yet our customer, you can sign up for a [30-day free trial](https://www.syncfusion.com/downloads "Get free evaluation of the Essential Studio products") to evaluate these features.

For questions, you can reach us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal").

## Related blogs

- [Blazor Synchronized Charts: The Perfect Tool for Trade Analysis](https://www.syncfusion.com/blogs/post/blazor-synchronized-charts.aspx "Blog: Blazor Synchronized Charts: The Perfect Tool for Trade Analysis")
- [What’s New in Blazor: 2023 Volume 4](https://www.syncfusion.com/blogs/post/whats-new-blazor-2023-volume-4.aspx "Blog: What’s New in Blazor: 2023 Volume 4")
- [Easily Integrate the Syncfusion Blazor PDF Viewer in Your .NET MAUI Apps](https://www.syncfusion.com/blogs/post/blazor-pdf-viewer-in-dotnet-maui.aspx "Blog: Easily Integrate the Syncfusion Blazor PDF Viewer in Your .NET MAUI Apps")
- [Exploring the Richness of Annotation Types in Blazor PDF Viewer](https://www.syncfusion.com/blogs/post/annotations-blazor-pdf-viewer.aspx "Blog: Exploring the Richness of Annotation Types in Blazor PDF Viewer")