api_combo_properties.md

sidebar_label	Form Combo properties
title	JavaScript Form - Combo Box Properties
description	You can explore the Properties of the Combo Box control of Form in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.

Combo properties

Usage

{
    type: "combo",
    name?: string,
    id?: string, // must be unique if set, auto-generated if not set
    data?: object[],
    value?: string | number | array,
    
    css?: string,
    disabled?: boolean, // false by default
    height?: string | number | "content", // "content" by default
    hidden?: boolean, // false by default
    padding?: string | number, 
    required?: boolean, // false by default
    validation?: (id: (string | number) | (string | number)[], text: string | string[]) => boolean,
    width?: string | number | "content", // "content" by default
    
    filter?: (item: any, input: string) => boolean,
    eventHandlers?: {
        [eventName: string]: {
            [className: string]: (event: Event, id: string | number) => void | boolean; 
        };
    },
    itemHeight?: number | string, // 32 by default
    itemsCount?: boolean | ((count: number) => string),
    listHeight?: number | string, // 224 by default
    multiselection?: boolean, // false by default
    newOptions?: boolean, // false by default
    placeholder?: string,
    readOnly?: boolean, // false by default
    selectAllButton?: boolean, // false by default
    template?: (item: any) => string,
    virtual?: boolean, // false by default
    
    hiddenLabel?: boolean, // false by default
    label?: string,
    labelPosition?: "left" | "top", // "top" by default
    labelWidth?: string | number,

    helpMessage?: string,
    preMessage?: string,
    successMessage?: string,
    errorMessage?: string,
}

Description

type	(required) the type of a control, set it to "combo"
name	(optional) the name of a control
id	(optional) the id of a control, must be unique if set, auto-generated if not set
data	(optional) an array of Combo options. Each option is an object with a set of key:value pairs - attributes of options and their values. The id attribute is returned and goes to form data. This attribute should always be fulfilled to avoid unexpected behavior The value attribute is displayed in the input field
value	(optional) specifies the id(s) of Combo options from data collection which values should appear in the input: if multiselection:true is set for a combo, the property can be set as an array of string/number values (for example, value: ["id_1","id_2","id_3"], or value: [1, 2, 3]) if multiselection:false is set or the multiselection config is not defined, the property can be set as a string/number, or an array (for example, value:"id_1", value: 1, or value: ["id_1"])
css	(optional) adds style classes to a control
disabled	(optional) defines whether a control is enabled (false) or disabled (true), false by default
height	(optional) the height of a control, "content" by default
hidden	(optional) defines whether a control is hidden, false by default
padding	(optional) sets padding between a cell and a border of the Combo control
required	(optional) defines whether the field with Combo is required (for a form), false by default
validation	(optional) a callback function which allows to validate Combo options. The function takes two parameters: id - (required) the ID(s) of the option(s) to validate text - (required) the value(s) of the option(s) and returns true/false to indicate the result of validation
width	(optional) the width of a control, "content" by default
filter	(optional) sets a custom function for filtering Combo options. Check the details.
eventHandlers	(optional) adds event handlers to HTML elements of a custom template of Combo items. Check the details.
itemHeight	(optional) sets the height of a cell in the list of options, 32 by default
itemsCount	(optional) shows the total number of selected options
listHeight	(optional) sets the height of the list of options, 224 by default
multiselection	(optional) enables selection of multiple options in Combo, false by default
newOptions	(optional) allows end users to add new values into the list of combobox options. To add a new value, the user needs to type it into the input field and either press "Enter" or click on the appeared Create "newValue" option in the drop-down list, false by default
placeholder	(optional) sets a placeholder in the input of Combo
readOnly	(optional) makes Combo readonly (it is only possible to select options from the list, without entering words in the input), false by default
selectAllButton	(optional) defines whether the Select All button should be shown, false by default
template	(optional) sets a template of displaying options in the popup list
virtual	(optional) enables dynamic loading of data on scrolling the list of options, false by default
hiddenLabel	(optional) makes the label invisible, false by default
label	(optional) specifies a label for a control
labelPosition	(optional) defines the position of a label: "left" | "top", "top" by default
labelWidth	(optional) sets the width of the label of a control
helpMessage	(optional) adds a help message to a control
preMessage	(optional) a message that contains instructions for interacting with the control
successMessage	(optional) a message that appears in case of successful validation of the control value
errorMessage	(optional) a message that appears in case of error during validation of the control value

Example

<iframe src="https://snippet.dhtmlx.com/wla7u1xq?mode=js" frameborder="0" class="snippet_iframe" width="100%" height="650"></iframe>

Related article: Combo