Skip to main content

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

TopicDescription
Basic initializationLearn how to initialize Combobox
LocalizationLearn how to localize Combobox (Example)

Loading data into Combobox

TopicDescription
Loading data into ComboboxRead how to load the initial data into Combobox
Initialization with config.dataThe 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 DataCollectionThe example shows how to load data from external DataCollection
Rendering a large data setLearn how to enable dynamic loading of data on scrolling the list of options (Example)

Integration

TopicDescription
Backend integrationLearn how to connect DHTMLX Suite to a backend (Demo)
OptimusLearn how to use DHTMLX Optimus framework for creating DHTMLX-based app
(recommended framework for creating apps with Suite components)
React integrationLearn how to use DHTMLX Chart with React (Demo)
Angular integrationLearn how to use DHTMLX Chart with Angular (Demo)
Vue integrationLearn 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.

TopicDescription
Setting initial valueLearn how to specify the initial values to be shown in the Combobox input (Example)
Enabling multiselectionLearn how to enable the ability to select several options (Example)
Adding Select All buttonLearn how to enable the ability to select all options at once (Example)
Displaying the number of selected optionsLearn how to show total number of selected options in the Combobox input (Example)
Configuring a labelLearn how to configure a label and its position for Combobox (Example)
Hiding a labelLearn how to make a label hidden
Setting a placeholderLearn how to set a placeholder in the input of Combo (Example)
Adding new optionsLearn how to allow end users to add new options into Combobox via UI (Example)
Editing/deleting optionsLearn how to allow end users to edit/delete options in Combobox via UI (Example)
Making Combobox readonlyLearn how to disable the ability to enter text in the input (Example)
Making Combobox disabledLearn 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.

TopicDescription
Height of Combobox elementsLearn how to set the height for list of Combobox options and its items (Example)
Applying custom filteringLearn how to set a custom function for filtering Combobox options (Example)
Grouping Combobox optionsThe example shows how to group Combobox options
Rendering HTML contentLearn 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 itemsLearn how to customize the appearance of displaying options in the popup list (Example)
List of CSS classesA 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.

TopicDescription
Enabling/disabling ComboboxLearn how to enable/disable Combobox (Example)
Showing/hiding a list of Combobox optionsLearn how to manipulate the visibility of the Combo popup (Example)
Setting/removing focusLearn 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).

TopicDescription
Adding/removing itemsLearn how to add or remove Combobox options (Example)
Updating itemsLearn how to update Combobox options (for example, to change their values) (Example)
Serializing combobox dataLearn how to serialize Combobox data
DataCollection APICheck 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.

TopicDescription
Selecting valuesLearn how to set the necessary values into the input (Example)
Getting selected valuesLearn how to get the values which are set in the input (Example)
Getting index of selected valuesLearn how to get the index of the value specified in the input (Example)
Clearing inputLearn 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.

TopicDescription
Event basic rulesLearn basic rules on how to work with events
Event handlingLearn how to attach, detach, or call the Combobox events (Example)

API reference

In this section you can find out corresponding references of Combobox API.

TopicDescription
Combobox methodsCheck the list of Combobox methods
Combobox eventsCheck the list of Combobox events
Combobox propertiesCheck 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.

TopicDescription
Touch supportLearn how to work with touch support
TypeScript supportLearn how to work with TypeScript
AwaitRedrawLearn how to perform the code after the component’s rendering

Any questions left?


info

Do you need more functionality? Feel free to share your suggestions in the comments below!