DevExtreme jQuery/JS - 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
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.