DevExtreme Angular - Array Only
To bind the List to an array, pass this array to the dataSource option. The array may contain primitive values...
JavaScript
- var fruits = ["Apples", "Oranges", "Lemons", "Pears", "Pineapples"];
- $(function() {
- $("#listContainer").dxList({
- dataSource: fruits
- });
- });
... or objects.
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)
- )
- }
- });
- });
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.
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)
- )
- }
- });
- });
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.