DevExtreme jQuery/JS - Array Only

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

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

$(function() {
    $("#tagBoxContainer").dxTagBox({
        dataSource: products
    });
});

... or objects.

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() {
    $("#tagBoxContainer").dxTagBox({
        dataSource: products,
        valueExpr: 'price',
        displayExpr: 'name'
    });
});

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:

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

$(function() {
    $("#tagBoxContainer").dxTagBox({
        dataSource: DevExpress.data.query(products)
                        .sortBy("price", true)
                        .toArray(),
        valueExpr: 'price',
        displayExpr: 'name'
    });
});
See Also