DevExtreme v23.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Free Trial Buy

Array Only

Bind the SelectBox to an array by passing it to the dataSource option. The array may contain primitive values...

jQuery
JavaScript
var products = ["HD Video Player", "SuperHD Video Player", "SuperPlasma 50", "SuperLED 50"];

$(function() {
    $("#selectBoxContainer").dxSelectBox({
        dataSource: products
    });
});
Angular
TypeScript
HTML
import { DxSelectBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    products = [
        "HD Video Player",
        "SuperHD Video Player",
        "SuperPlasma 50",
        "SuperLED 50"
    ];
}
@NgModule({
     imports: [
         // ...
         DxSelectBoxModule
     ],
     // ...
 })
<dx-select-box
    [dataSource]="products">
</dx-select-box>

... or objects.

jQuery
JavaScript
var products = [
    { name: "HD Video Player", price: 100 },
    { name: "SuperHD Video Player", price: 420 },
    { name: "SuperPlasma 50", price: 1500 },
    { name: "SuperLED 50", price: 200 }
];

$(function() {
    $("#selectBoxContainer").dxSelectBox({
        dataSource: products,
        valueExpr: 'price',
        displayExpr: 'name'
    });
});
Angular
TypeScript
HTML
import { DxSelectBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    products =  [
        { name: "HD Video Player", price: 100 },
        { name: "SuperHD Video Player", price: 420 },
        { name: "SuperPlasma 50", price: 1500 },
        { name: "SuperLED 50", price: 200 }
    ];
}
@NgModule({
     imports: [
         // ...
         DxSelectBoxModule
     ],
     // ...
 })
<dx-select-box
    [dataSource]="products"
    valueExpr="price"
    displayExpr="name">
</dx-select-box>

You can create a Query if objects in an array need to be processed (sorted, filtered, grouped, etc.). For example, in the following code, a Query sorts objects in the products array by the price field in descending order:

jQuery
JavaScript
var products = [
    { name: "HD Video Player", price: 100 },
    // ...
];

$(function() {
    $("#selectBoxContainer").dxSelectBox({
        dataSource: DevExpress.data.query(products)
                        .sortBy("price", true)
                        .toArray(),
        valueExpr: 'price',
        displayExpr: 'name'
    });
});
Angular
TypeScript
HTML
import query from "devextreme/data/query";
import { DxSelectBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    products = [
        { name: "HD Video Player", price: 100 },
        // ...
    ];
    getSortedProducts () {
        return query(this.products)
                .sortBy("price", true)
                .toArray();
    }
}
@NgModule({
     imports: [
         // ...
         DxSelectBoxModule
     ],
     // ...
 })
<dx-select-box ...
    dataSource="getSortedProducts()">
</dx-select-box>
See Also