We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Trusted by the world’s leading companies

Syncfusion Trusted Companies

Overview

The Dropdown Tree control is a textbox control that allows the user to select single or multiple values from hierarchical data in a tree-like structure. It has several out-of-the-box features, such as data binding, check boxes, templates, UI customization, accessibility, and preselected values.

HTML5/JavaScript Dropdown Tree


HTML5/JavaScript Dropdown Tree with data binding.

Data binding

You can bind data to the Dropdown Tree control from a variety of data sources. The 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.


Render modes

The Dropdown Tree control has different render modes to visualize selected items.

Box mode

The selected items are displayed as a chip (box) in the Dropdown Tree input box.

JavaScript/HTML5 Dropdown Tree with chip mode

Delimiter mode

The selected items are displayed with the delimiter character in the Dropdown Tree input box.

JavaScript/HTML5 Dropdown Tree with delimiter mode

Default mode

The default mode is a combination of both the box and delimiter modes. When the control is in focus, the selected items will be displayed as chips similar to the box mode. Otherwise, the selected items will be displayed with a delimiter character as in the delimiter mode.

JavaScript/HTML5 Dropdown Tree with default rendering mode.


HTML5/JavaScript Dropdown Tree with checkboxes.

Check box support

The JavaScript Dropdown Tree control provides built-in support for check boxes, allowing users to select more than one item. Enabling the check boxes and auto-check functionality makes the parent and child items dependent on each other. This control also provides a Select All option of all items in the pop-up.


Multiple selection

The Dropdown Tree control allows users to select more than one item in the pop-up through the multi-selection functionality.

HTML5/JavaScript Dropdown Tree with multiple selection.


UI customization with templates

Use templates to change the appearance of the selection pop-up for tree items, plus the header and footer of the pop-up tree.

Header template

Design your own header for the pop-up tree using the header template.

JavaScript/HTML5 Dropdown Tree with header template

Item template

Define the custom appearance of each tree item using the item template.

JavaScript/HTML5 Dropdown Tree with item template

Design your own custom footer for the pop-up tree using the footer template.

JavaScript/HTML5 Dropdown Tree with footer template


Built-in themes

Five built-in SASS-based themes are available, such as Material, Bootstrap 3, Bootstrap 4, Fabric, and high contrast.

Theme illustration for JavaScript/HTML5 Dropdown tree


Web accessibility

  • Fully supports WAI-ARIA accessibility to make the Dropdown Tree accessible to screen readers and assistive devices.
  • Follows WAI-ARIA best practices for implementing keyboard interaction.
  • Uses WCAG 2.0-based design for UI element visuals such as foreground color, background color, line spacing, text, and images.
  • Supports right-to-left (RTL) direction for users working in RTL languages like Hebrew and Arabic.

Developer-friendly APIs

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.


Other frameworks

The JavaScript Dropdown tree control is also available in Angular, React, and Vue frameworks that are built from their own TypeScript libraries.


65+ JAVASCRIPT UI CONTROLS

Read independent,
authenticated reviews
on G2

Download Now Pricing

What do our customers say about us?

double quotes

We're using the file formats and Windows/JavaScript list controls a lot. They're fast, easy to use, and the documentation is good and contains examples. Tickets with questions or suggestions were answered within a day, so we're happy to use the Syncfusion libraries.
Daniel Persidok

Daniel Persidok

wpd onshore GmbH & Co. KG

double quotes

Using Syncfusion Angular and JavaScript controls makes front-end web development a piece of cake. Each component has many properties that can be configured as per your desire, methods that can be used to interact with the element, and a lot of events that trigger at different stages, which makes modifying your components according to the state of the application an easy task. Also, their support is amazing! They always offer a sample working project, which makes it very simple to solve your question about your code.
Carlos Rodriguez Garcia

Carlos Rodriguez Garcia

Vistatec

Transform your applications today by downloading our free evaluation version Download Free Trial

Awards

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.

Syncfusion Awards
Scroll up icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon