@syncfusion/ej2-dropdowns is a comprehensive package for creating dropdown components in web applications. It provides a variety of dropdown elements such as ComboBox, AutoComplete, DropDownList, and MultiSelect Dropdown, which are highly customizable and easy to integrate.

What are @syncfusion/ej2-dropdowns's main functionalities?

ComboBox

The ComboBox component allows users to select an item from a dropdown list or enter their own value. It supports data binding, filtering, and custom templates.

const comboBox = new ej.dropdowns.ComboBox({ dataSource: ['Apple', 'Banana', 'Cherry'], placeholder: 'Select a fruit' }); comboBox.appendTo('#comboBox');

AutoComplete

The AutoComplete component provides suggestions while typing into the input field. It supports data binding, filtering, and custom templates.

const autoComplete = new ej.dropdowns.AutoComplete({ dataSource: ['Apple', 'Banana', 'Cherry'], placeholder: 'Type to search' }); autoComplete.appendTo('#autoComplete');

DropDownList

The DropDownList component allows users to select an item from a predefined list. It supports data binding, filtering, and custom templates.

const dropDownList = new ej.dropdowns.DropDownList({ dataSource: ['Apple', 'Banana', 'Cherry'], placeholder: 'Select a fruit' }); dropDownList.appendTo('#dropDownList');

MultiSelect Dropdown

The MultiSelect Dropdown component allows users to select multiple items from a dropdown list. It supports data binding, filtering, and custom templates.

const multiSelect = new ej.dropdowns.MultiSelect({ dataSource: ['Apple', 'Banana', 'Cherry'], placeholder: 'Select fruits' }); multiSelect.appendTo('#multiSelect');

Other packages similar to @syncfusion/ej2-dropdowns

Readme

Source

ej2-dropdowns

Superset of HTML select box contains specific features such as data binding, grouping, sorting, filtering, and templates.

Note: This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's EULA (https://www.syncfusion.com/eula/es/). To acquire a license, you can purchase one at https://www.syncfusion.com/sales/products or start a free 30-day trial here (https://www.syncfusion.com/account/manage-trials/start-trials).

A free community license (https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers..

1. Setup To install this package and its dependent packages, use the following command

Use the following command to install drop-down components and its dependent packages

npm install @syncfusion/ej2-dropdowns

2. Components included

DropDownList - A textbox component that allows users to select a non-editable single value from the list of predefined values.
ComboBox - A textbox component that allows users to type a value or choose an option from the list of predefined options.
Autocomplete - A textbox component that provides a list of suggestions to select based on the text typed by the users.
MultiSelect - A textbox component that allows users to type or choose multiple values from the list of predefined options.
ListBox - ListBox is a graphical user interface component used to display a list of items. Users can select one or more items in the list using a checkbox or by keyboard selection. It supports sorting, grouping, reordering, and drag and drop of items.

3. Supported frameworks

Drop-down components also supports the following frameworks:

4. Use-case samples / Showcase samples

Expanse Tracker (Source, Live Demo)
Loan Calculator (Source, Live Demo)
Web Mail (Source, Live Demo)

5. Key features

DropDownList
- Data binding: Binds and accesses the list of items from the local or server-side data source.
- Grouping: Groups the logically related items under a single or specific category.
- Sorting: Sorts the list items in alphabetical order (either ascending or descending).
- Filtering: Filters the list items based on a character typed in the search box.
- Templates: Customizes the list items, selected value, header, footer, category group header, and no records content.
- Accessibility: Provided with built-in accessibility support used to access all the DropDownList component features using keyboard, screen readers, or other assistive technology devices.
ComboBox
- Data binding: Binds and accesses the list of items from local or server-side data source.
- Custom values: Sets user-defined values that is not in the pop-up list.
- Grouping: Groups the logically related items under a single or specific category.
- Sorting: Sorts the list items in alphabetical order (either ascending or descending).
- Filtering: Filters the list items based on a character typed in the component.
- Templates: Customizes the list items, selected value, header, footer, category group header, and no records content.
- Accessibility: Provided with built-in accessibility support that helps to access all the ComboBox component features using the keyboard, screen readers, or other assistive technology devices.
AutoComplete
- Data binding: Binds and accesses the list of items from local or server-side data source.
- Grouping: Groups the logically related items under a single or specific category.
- Sorting: Sorts the list items in alphabetical order (either ascending or descending).
- Highlight search: Highlights the typed text in the suggestion list.
- Templates: Customizes the list item, header, footer, category group header, no records, and action failure content.
- Accessibility: Provided with built-in accessibility support that helps to access all the AutoComplete component features using keyboard, on-screen readers, or other assistive technology devices.
MultiSelect
- Data binding: Binds and accesses the list of items from local or server-side data source.
- Grouping: Groups the logically related items under a single or specific category.
- Templates: Customizes the list items, selected value, header, footer, category group header, and no records content.
- Sorting: Sorts the list items in alphabetical order (either ascending or descending).
- Filtering: Filters the list items based on a character typed in the search box.
- Custom value: Allows users to select a new custom value.
- Accessibility: Provided with built-in accessibility support that helps to access all the DropDownList component features using the keyboard, screen readers, or other assistive technology devices.
ListBox
- Data binding: Binds and accesses the list of items from local or server-side data source.
- Dual ListBox: Allows transferring and reordering the list item between two ListBoxes.
- Drag and Drop: Allows drag and drop the list item with the same/multiple ListBox.
- Grouping: Groups the logically related items under a single or specific category.
- Templates: Customizes the list items.
- Sorting: Sorts the list items in alphabetical order (either ascending or descending).
- Accessibility: Provided with built-in accessibility support that helps to access all the ListBox component features using the keyboard, screen readers, or other assistive technology devices.

6. Support

Product support can be obtained through the following mediums:

Creating incident in Syncfusion Direct-trac support system or Community forum.
New GitHub issue.
Ask your query in Stack Overflow with tag ‘syncfusion’, ‘ej2’.

7. License

Check the license details here.

8. Change log

Check the changelog here

Keywords

FAQs

What is @syncfusion/ej2-dropdowns?

Is @syncfusion/ej2-dropdowns popular?

Is @syncfusion/ej2-dropdowns well maintained?

Last updated on 14 Mar 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@syncfusion/ej2-dropdowns

What is @syncfusion/ej2-dropdowns?

What are @syncfusion/ej2-dropdowns's main functionalities?

Other packages similar to @syncfusion/ej2-dropdowns

react-select

antd

bootstrap