Features
This page helps you start working with DHTMLX Combobox and explore its functionality in depth.
How to start with DHTMLX Combobox
In this section you will learn how to initialize and localize Combobox, load data into it, and integrate it into your applications.
Initialization and localization
| Topic | Description |
|---|---|
| Basic initialization | Learn how to initialize Combobox |
| Localization | Learn how to localize Combobox (Example) |
Loading data into Combobox
| Topic | Description |
|---|---|
| Loading data into Combobox | Learn how to load the initial data into Combobox |
| Initialization with config.data | The example shows how to load data into Combobox on the fly |
| Initialization with data.load() | The example shows how to load data from an external file |
| Initialization with data.parse() | The example shows how to load data from a local data source |
| Initialization with external DataCollection | The example shows how to load data from external DataCollection |
| Rendering a large data set | Learn how to render options dynamically as the user scrolls the list (Example) |
Integration
| Topic | Description |
|---|---|
| Backend integration | Learn how to connect DHTMLX Suite to a backend (Demo) |
| Optimus | Learn how to use the DHTMLX Optimus framework to build DHTMLX-based apps (the recommended framework for apps with Suite components) |
| React integration | Learn how to use DHTMLX Combobox with React (Demo) |
| Angular integration | Learn how to use DHTMLX Combobox with Angular (Demo) |
| Vue integration | Learn how to use DHTMLX Combobox with Vue.js (Demo) |
How to configure Combobox
In this section you will learn how to set an initial value in the input, enable multiselection, configure a label and a placeholder, and more.
| Topic | Description |
|---|---|
| Setting initial value | Learn how to specify the initial values that appear in the Combobox input (Example) |
| Enabling multiselection | Learn how to select several options at once (Example) |
| Adding Select All button | Learn how to select all options with a single button (Example) |
| Displaying the number of selected options | Learn how to show the total number of selected options in the Combobox input (Example) |
| Configuring a label | Learn how to configure a label and its position for Combobox (Example) |
| Hiding a label | Learn how to hide a label |
| Setting a placeholder | Learn how to set a placeholder in the Combobox input (Example) |
| Adding new options | Learn how to let users add new options to Combobox from the UI (Example) |
| Editing/deleting options | Learn how to let users edit and delete Combobox options from the UI (Example) |
| Making Combobox readonly | Learn how to prevent typing in the input (Example) |
| Making Combobox disabled | Learn how to block all operations with Combobox (Example) |
How to customize Combobox and change its size
In this section you will learn how to customize Combobox and configure the height of the option list and its items.
| Topic | Description |
|---|---|
| Height of Combobox elements | Learn how to set the height of the Combobox option list and of its items (Example) |
| Applying custom filtering | Learn how to set a custom function that filters Combobox options (Example) |
| Grouping Combobox options | The example shows how to group Combobox options |
| Rendering HTML content | Learn how to display HTML content as plain text to prevent XSS attacks (Example) |
| Styling Combobox (custom CSS) | Learn how to change the appearance of Combobox (Example) |
| Styling Combobox items | Learn how to customize the appearance of options in the popup list (Example) |
| List of CSS classes | The CSS classes included in the DHTMLX library |
How to work with Combobox
In this section you will learn how to enable and disable Combobox, show and hide the list of options, and set and remove focus.
| Topic | Description |
|---|---|
| Enabling/disabling Combobox | Learn how to enable/disable Combobox (Example) |
| Showing/hiding a list of Combobox options | Learn how to show and hide the Combobox popup (Example) |
| Setting/removing focus | Learn how to set focus to Combobox (Example) |
How to work with data in Combobox
In this section you will learn how to apply the DataCollection API to Combobox data (for example, how to add, update, serialize, or remove data).
| Topic | Description |
|---|---|
| Adding/removing items | Learn how to add or remove Combobox options (Example) |
| Updating items | Learn how to update Combobox options (for example, to change their values) (Example) |
| Serializing Combobox data | Learn how to serialize Combobox data |
| DataCollection API | Check the full DataCollection API reference |
How to work with selected options
In this section you will learn how to set and read the input values, get the index of a specified value, and clear the input.
| Topic | Description |
|---|---|
| Selecting values | Learn how to set values in the input (Example) |
| Getting selected values | Learn how to read the values set in the input (Example) |
| Getting index of selected values | Learn how to get the index of the value specified in the input (Example) |
| Clearing input | Learn how to clear the specified values from the Combobox input (Example) |
How to work with Combobox events
In this section you will learn how to work with Combobox events.
| Topic | Description |
|---|---|
| Event basic rules | Learn the basic rules of event handling |
| Event handling | Learn how to attach, detach, or call Combobox events (Example) |
API reference
In this section you will find the Combobox API reference.
| Topic | Description |
|---|---|
| Combobox methods | Check the list of Combobox methods |
| Combobox events | Check the list of Combobox events |
| Combobox properties | Check the list of Combobox properties |
Common functionality
In this section you will learn about common library functionality that is useful when you work with Combobox.
| Topic | Description |
|---|---|
| Touch support | Learn how to work with touch support |
| TypeScript support | Learn how to work with TypeScript |
| Accessibility support | Learn about accessibility support in Combobox |
| AwaitRedraw | Learn how to perform the code after the component's rendering |
Any questions left?
Do you need more functionality? Feel free to share your suggestions in the comments below!