DevExtreme v23.1 is now available.

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

Free Trial Buy

Array Only

To bind the List to an array, pass this array to the dataSource option. The array may contain primitive values...

jQuery
JavaScript
var fruits = ["Apples", "Oranges", "Lemons", "Pears", "Pineapples"];

$(function() {
    $("#listContainer").dxList({
        dataSource: fruits
    });
});
Angular
TypeScript
HTML
import { DxListModule } from "devextreme-angular";
// ...
export class AppComponent {
    fruits = ["Apples", "Oranges", "Lemons", "Pears", "Pineapples"];
}
@NgModule({
    imports: [
        // ...
        DxListModule
    ],
    // ...
})
<dx-list
    [dataSource]="fruits">
</dx-list>

... or objects.

jQuery
JavaScript
var fruits = [
    { fruit: "Apples", count: 10 },
    { fruit: "Oranges", count: 12 },
    { fruit: "Lemons", count: 15 },
    { fruit: "Pears", count: 20 },
    { fruit: "Pineapples", count: 3 }
];

$(function() {
    $("#listContainer").dxList({
        dataSource: fruits,
        itemTemplate: function(data, _, element) {
            element.append(
                $("<b>").text(data.fruit), $("<br />"),
                $("<p>").text(data.count).css("margin", 0)
            )
        }
    });
});
Angular
HTML
TypeScript
<dx-list>
    <dxi-item *ngFor="let item of fruits">
        <b>{{item.fruit}}</b><br/>
        <p style="margin:0">{{item.count}}</p>
    </dxi-item>
</dx-list>
import { DxListModule } from "devextreme-angular";
// ...
export class AppComponent {
    fruits = [
        { fruit: "Apples", count: 10 },
        { fruit: "Oranges", count: 12 },
        { fruit: "Lemons", count: 15 },
        { fruit: "Pears", count: 20 },
        { fruit: "Pineapples", count: 3 }
    ];
}
@NgModule({
    imports: [
        // ...
        DxListModule
    ],
    // ...
})

If objects in an array need to be processed (sorted, filtered, grouped, etc.), you can create a Query. For example, in the following code, a Query sorts objects in the fruits array by the count field in descending order.

jQuery
JavaScript
var fruits = [
    { fruit: "Apples", count: 10 },
    // ...
];

$(function() {
    $("#listContainer").dxList({
        dataSource: DevExpress.data.query(fruits)
                        .sortBy("count", true)
                        .toArray(),
        itemTemplate: function(data, _, element) {
            element.append(
                $("<b>").text(data.fruit), $("<br />"),
                $("<p>").text(data.count).css("margin", 0)
            )
        }
    });
});
Angular
TypeScript
HTML
import { DxListModule } from "devextreme-angular";
import query from "devextreme/data/query";
// ...
export class AppComponent {
    fruits = [
        { fruit: "Apples", count: 10 },
        // ...
    ];
    getSortedFruits () {
        return query(this.fruits)
                .sortBy("count", true)
                .toArray();
    }
}
@NgModule({
    imports: [
        // ...
        DxListModule
    ],
    // ...
})
<dx-list
    [dataSource]="getSortedFruits()">
    <div *dxTemplate="let data of 'item'">
        <b>{{data.fruit}}</b><br/>
        <p style="margin:0">{{data.count}}</p>
    </div>
</dx-list>
See Also