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