The Dropdown Tree component allows users to select a single value or multiple values in an input box from hierarchical data in a tree-like structure. It has several out-of-the-box features, such as data binding, checkboxes, templates, UI customization, accessibility, and preselected values.
Easily get started with the Blazor Dropdown Tree using a few simple lines of C# code, as demonstrated below. Also explore our Blazor Dropdown Tree example, which shows how to render and configure the Blazor Dropdown Tree.
@using Syncfusion.Blazor.Navigations
<SfDropDownTree TItem="ProductCategory" TValue="int?" ID="list" Placeholder="Select a Category" PopupHeight="200px">
<DropDownTreeField TItem="ProductCategory" DataSource="@Categories" ID="Id" ParentID="ParentId" Text="Name" HasChildren="HasChild" Expanded="Expanded"></DropDownTreeField>
</SfDropDownTree>
@code{
List<ProductCategory> Categories = new List<ProductCategory>
{
new ProductCategory { Id = 1, Name = "Electronics", HasChild=true, Expanded = true },
new ProductCategory { Id = 2, Name = "Smartphones", ParentId = 1 },
new ProductCategory { Id = 3, Name = "Laptops", ParentId = 1 },
new ProductCategory { Id = 6, Name = "Clothing", HasChild=true },
new ProductCategory { Id = 7, Name = "Men's Clothing", ParentId = 6 },
new ProductCategory { Id = 8, Name = "Women's Clothing", ParentId = 6 },
new ProductCategory { Id = 11, Name = "Home & Furniture", HasChild=true },
new ProductCategory { Id = 12, Name = "Living Room", ParentId = 11 },
new ProductCategory { Id = 13, Name = "Bedroom", ParentId = 11 },
new ProductCategory { Id = 16, Name = "Sports & Fitness", HasChild=true, Expanded=true },
new ProductCategory { Id = 17, Name = "Exercise Equipment", ParentId = 16 },
new ProductCategory { Id = 19, Name = "Team Sports", ParentId = 16 },
new ProductCategory { Id = 20, Name = "Books & Media", HasChild=true },
new ProductCategory { Id = 21, Name = "Books", ParentId = 20 },
new ProductCategory { Id = 24, Name = "Toys & Games", HasChild = true },
new ProductCategory { Id = 25, Name = "Board Games", ParentId = 24 },
new ProductCategory { Id = 26, Name = "Outdoor Games", ParentId = 24 }
};
class ProductCategory
{
public int? Id { get; set; }
public string Name { get; set; }
public int? ParentId { get; set; }
public bool HasChild { get; set; }
public bool Expanded { get; set; }
}
}
Bind data to the Dropdown Tree component from different data sources, either self-referential data that contains a list of objects with ParentID mapping or heirarchical data that contains a nested list of objects. Data can be local or in any remote service and fetched using different kinds of adapters like OData, OData V4, URL, and web API.
The Dropdown Tree component has different render modes to visualize selected items.
The selected items are displayed as chips (boxes) with removable icons in the Dropdown Tree input box.
The selected items are displayed with the delimiter character in the Dropdown Tree input box.
When the component is in focus, selections are displayed as chips. When not in focus, selections are displayed with delimiters.
The Blazor Dropdown Tree component provides built-in support for checkboxes, allowing users to select more than one item. Enabling the checkboxes and autocheck functionality makes the parent and child items dependent on each other.
The Dropdown Tree component allows users to select more than one item in the pop-up using the multiselection functionality. Ctrl and Shift key combinations can be used for node selection.
Use templates to change the appearance of the selection pop-up for tree items,the header and footer of the pop-up tree.
Design your own header for the pop-up tree using the header template.
Define the custom appearance of each tree item using the item template.
Define the custom appearance of selected values in the Dropdown Tree input using the value template. Control the presentation of the selected items, such as adding custom HTML, text formatting, or icons to match your application’s design.
Design your own custom footer for the pop-up tree using the footer template.This allows you to fully customize the footer content according to your requirements, offering flexibility in design and functionality.
The Blazor Dropdown Tree component supports in-built filtering through which users can filter the required items based on the characters searched in the search box.
The Blazor Dropdown Tree component supports built-in themes: Material, Material 3, Bootstrap, Fabric (Office 365), Tailwind CSS, Fluent, and high contrast. Users can customize these built-in themes or create new themes to achieve their desired look and feel by either overriding Sass variables or using our Theme Studio application.
Developers can customize all UI elements and component their behaviors according to the end user’s requirements using the component’s rich set of client-side APIs.
100+ UI components
960+ interactive Blazor demos
2.9M+ downloads
The Dropdown Tree is available for the React, Angular, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links:
The Blazor Dropdown Tree works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera.
The Syncfusion Blazor Dropdown Tree component supports the following features:
We do not sell the Blazor Dropdown Tree separately. It is only available for purchase as part of the Syncfusion team license, which contains over 100 Blazor components, including the Dropdown Tree. The price of the team license starts at $395 per month for 5 developers, and includes support and updates until the subscription expires. On top of this, we might be able to offer additional discounts based on currently active promotions. Please contact our product specialists today to see if you qualify for any additional discounts.
You can find our Blazor Dropdown Tree demo, which demonstrates how to render and configure the Dropdown Tree.
No, our 1,900+ components and frameworks for web, mobile, and desktop, including our Blazor Dropdown Tree, are not sold individually. They are only available as part of a team license. However, we have competitively priced the product, so it only costs a little bit more than what some other vendors charge for their Dropdown Tree component alone. We have also found that, in our experience, our customers usually start off using one of our products and then expand to several products quickly, so we felt it was best to offer all 1,900+ components and frameworks for a subscription fee that starts at $395 per month for a team of 5 developers. Additionally, we might be able to offer discounts based on currently active promotions. Please contact our product specialists today to see if you qualify for any additional discounts.
No, this is a commercial product and requires a paid license. However, a free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue, 5 or fewer developers, and 10 or fewer total employees.
A good place to start would be our comprehensive getting started documentation.
Figma Download
Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion® is proud to hold the following industry awards.
The Blazor Dropdown Tree tutorial videos and blog posts will guide you in building your first app with this Blazor components. They provide problem-solving strategies, describe features and functionalities, announce new feature releases, explain best practices, and showcase example scenarios. Explore our latest posts on our blog and tutorial video channels for Blazor Dropdown Tree updates.
