JavaScript/jQuery SelectBox Options

acceptCustomValue

accessKey

activeStateEnabled

dataSource

deferRendering

disabled

displayExpr

displayValue

dropDownButtonTemplate

elementAttr

$(function(){
    $("#selectBoxContainer").dxSelectBox({
        // ...
        elementAttr: {
            id: "elementId",
            class: "class-name"
        }
    });
});

<dx-select-box ...
    [elementAttr]="{ id: 'elementId', class: 'class-name' }">
</dx-select-box>

import { DxSelectBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxSelectBoxModule
    ],
    // ...
})

@(Html.DevExtreme().SelectBox()
    .ElementAttr("class", "class-name")
    // ===== or =====
    .ElementAttr(new {
        @id = "elementId",
        @class = "class-name"
    })
    // ===== or =====
    .ElementAttr(new Dictionary<string, object>() {
        { "id", "elementId" },
        { "class", "class-name" }
    })

)

@(Html.DevExtreme().SelectBox() _
    .ElementAttr("class", "class-name")
    ' ===== or =====
    .ElementAttr(New With {
        .id = "elementId",
        .class = "class-name"
    })
    ' ===== or =====
    .ElementAttr(New Dictionary(Of String, Object) From {
        { "id", "elementId" },
        { "class", "class-name" }
    })
)

fieldTemplate

focusStateEnabled

grouped

var dataSource = [{
    key: "Group 1", // Group caption 
    items: [ // Items in the group
        { ... },
        { ... }
    ]
}, {
    // ...
}];

groupTemplate

height

hint

hoverStateEnabled

inputAttr

$(function(){
    $("#selectBoxContainer").dxSelectBox({
        // ...
        inputAttr: {
            id: "inputId"
        }
    });
});

<dx-select-box ...
    [inputAttr]="{ id: 'inputId' }">
</dx-select-box>

import { DxSelectBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxSelectBoxModule
    ],
    // ...
})

@(Html.DevExtreme().SelectBox()
    .InputAttr("id", "inputId")
    // ===== or =====
    .InputAttr(new {
        @id = "inputId"
    })
    // ===== or =====
    .InputAttr(new Dictionary<string, object>() {
        { "id", "inputId" }
    })
)

@(Html.DevExtreme().SelectBox() _
    .InputAttr("id", "inputId")
    ' ===== or =====
    .InputAttr(New With {
        .id = "inputId"
    })
    ' ===== or =====
    .InputAttr(New Dictionary(Of String, Object) From {
        { "id", "inputId" }
    })
)

isValid

var editorValue = ko.observable("").extend({
    dxValidator: {
        validationRules: [{
            type: "required",
            message: "Specify this value"
        }]
    }
});
var viewModel = {
    editorOptions: {
        value: editorValue,
        isValid: editorValue.dxValidator.isValid,
        validationError: editorValue.dxValidator.validationError
    }
};

items

itemTemplate

maxLength

minSearchLength

name

noDataText

onChange

onClosed

onContentReady

onCopy

onCustomItemCreating

onCut

onDisposing

onEnterKey

onFocusIn

onFocusOut

onInitialized

onInput

onItemClick

onKeyDown

onKeyPress

onKeyUp

onOpened

onOptionChanged

onPaste

onSelectionChanged

onValueChanged

opened

placeholder

readOnly

rtlEnabled

DevExpress.config({
    rtlEnabled: true
});

searchEnabled

searchExpr

searchExpr: ["firstName", "lastName"]

searchMode

searchTimeout

selectedItem

showClearButton

showDataBeforeSearch

showDropDownButton

showSelectionControls

spellcheck

tabIndex

text

validationError

validationMessageMode

value

valueChangeEvent

valueExpr

visible

width