The Dropdown Tree control is a text-box control that allows users to select a single value or multiple values 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.
Bind data to the Dropdown Tree control from different data sources. Data can be local or in any remote service and fetched using different kinds of adapters like OData, OData V4, URL, JSON, and web API.
The selected items are displayed as a chip (box) in the Dropdown Tree input box.
The selected items are displayed with the delimiter character in the Dropdown Tree input box.
The default mode is a combination of both the box and delimiter modes. When the control is in focus, selected items will be displayed as chips similar to the box mode. Otherwise, they will be displayed with a delimiter character as in the delimiter mode.
The selected items are displayed with the given custom template value instead of the selected item text in the input box.
The ASP.NET Core Dropdown Tree control provides built-in support for checkboxes, allowing users to select more than one item. Enabling the checkboxes and auto check functionality makes the parent and child items dependent on each other. This control also provides a Select All option in the pop-up.
The Dropdown Tree control allows users to select more than one item in the pop-up using the multiselection functionality.
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.
Several built-in, Sass-based themes are available: Fluent, Tailwind CSS, Bootstrap 5, Bootstrap, Material, and high contrast. Users can customize these themes by either overriding the existing Sass styles or creating custom themes using the Theme Studio application.
Developers can customize all UI elements and control their behaviors according to the end user’s requirements through the control’s rich set of client-side APIs.
The Dropdown Tree component is also available in React, Angular, JavaScript, and Vue frameworks. Check out the different Dropdown Tree platforms from the links below:
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.
