Features
This page contains structured information that will help you to start working with DHTMLX Combobox and go into deep dive on its functionality.
How to start with DHTMLX Combobox
In this section you can find out how to initialize and localize Combobox, how to load data into the component and how to integrate Combobox 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 | Read 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 to load data from external file |
| Initialization with data.parse() | The example 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 enable dynamic loading of data on scrolling the list of options (Example) |
Integration
| Topic | Description |
|---|---|
| Backend integration | Learn how to connect DHTMLX Suite to a backend (Demo) |
| Optimus | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating apps with Suite components) |
| React integration | Learn how to use DHTMLX Chart with React (Demo) |
| Angular integration | Learn how to use DHTMLX Chart with Angular (Demo) |
| Vue integration | Learn how to use DHTMLX Chart with Vue.js (Demo) |
How to configure Combobox
In this section you will find out how to set initial value into the input, to enable multiselection, to configure a label and placeholder, and more.
| Topic | Description |
|---|---|
| Setting initial value | Learn how to specify the initial values to be shown in the Combobox input (Example) |
| Enabling multiselection | Learn how to enable the ability to select several options (Example) |
| Adding Select All button | Learn how to enable the ability to select all options at once (Example) |
| Displaying the number of selected options | Learn how to show 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 make a label hidden |
| Setting a placeholder | Learn how to set a placeholder in the input of Combo (Example) |
| Adding new options | Learn how to allow end users to add new options into Combobox via UI (Example) |
| Editing/deleting options | Learn how to allow end users to edit/delete options in Combobox via UI (Example) |
| Making Combobox readonly | Learn how to disable the ability to enter text in the input (Example) |
| Making Combobox disabled | Learn how to block any operations with Combobox (Example) |
How to customize Combobox and change its size
In this section you can learn how to customize Combobox and configure the height of the options list and its items.
| Topic | Description |
|---|---|
| Height of Combobox elements | Learn how to set the height for list of Combobox options and its items (Example) |
| Applying custom filtering | Learn how to set a custom function for filtering 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 look and feel of Combobox (Example) |
| Styling Combobox items | Learn how to customize the appearance of displaying options in the popup list (Example) |
| List of CSS classes | A set of CSS classes provided by the DHTMLX library |
How to work with Combobox
In this section you will find out how to enable and disable Combobox, to show and hide the list of options, to 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 manipulate the visibility of the Combo popup (Example) |
| Setting/removing focus | Learn how to set focus to Combobox (Example) |
How to work with data in Combobox
In this section you can discover how to apply the DataCollection API to work with data of Combobox (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 list of all available DataCollection API |
How to work with selected options
In this section you will learn how to set the necessary values in the input and get them, how to get the index of the value specified in the input, and how to clear the input.
| Topic | Description |
|---|---|
| Selecting values | Learn how to set the necessary values into the input (Example) |
| Getting selected values | Learn how to get the values which are 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 Combobox input from the specified values (Example) |
How to work with Combobox events
This section explains how to work with Combobox events.
| Topic | Description |
|---|---|
| Event basic rules | Learn basic rules on how to work with events |
| Event handling | Learn how to attach, detach, or call the Combobox events (Example) |
API reference
In this section you can find out corresponding references of Combobox API.
| 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 functionality of the library which can be useful while working with Combobox.
| Topic | Description |
|---|---|
| Touch support | Learn how to work with touch support |
| TypeScript support | Learn how to work with TypeScript |
| 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!