DevExtreme React - In the Data Source
Items in the List are grouped if they are grouped in the data source. The List recognizes a group when it encounters an object with the key and items fields. The key is the group header, the items are items that fell into the group. For example, the fruitsVegetables
array from the following code produces two groups with three items each. Note that the List needs to be informed that it deals with grouped data, therefore its grouped option is set to true.
jQuery
var fruitsVegetables = [{ key: "Fruits", items: [ { name: "Apples", count: 10 }, { name: "Oranges", count: 12 }, { name: "Lemons", count: 15 } ] }, { key: "Vegetables", items: [ { name: "Potatoes", count: 5 }, { name: "Tomatoes", count: 9 }, { name: "Turnips", count: 8 } ] }]; $(function() { $("#listContainer").dxList({ dataSource: fruitsVegetables, grouped: true, itemTemplate: function(data, _, element) { element.append( $("<p>").text(data.name + " | " + data.count).css("margin", 0) ) } }); });
Angular
import { DxListModule } from "devextreme-angular"; // ... export class AppComponent { fruitsVegetables = [{ key: "Fruits", items: [ { name: "Apples", count: 10 }, { name: "Oranges", count: 12 }, { name: "Lemons", count: 15 } ] }, { key: "Vegetables", items: [ { name: "Potatoes", count: 5 }, { name: "Tomatoes", count: 9 }, { name: "Turnips", count: 8 } ] }]; } @NgModule({ imports: [ // ... DxListModule ], // ... })
<dx-list [dataSource]="fruitsVegetables" [grouped]="true"> <div *dxTemplate="let data of 'item'"> <p style="margin:0px">{{data.name}} | {{data.count}}</p> </div> </dx-list>
If objects in your data source miss the key and items fields, use the map function of the DevExtreme DataSource to bring these objects to the key + items structure. You can find more information on the map function in the Data Layer - Item Mapping topic.
jQuery
var fruitsVegetables = [{ type: "Fruits", collection: [ { name: "Apples", count: 10 }, { name: "Oranges", count: 12 }, { name: "Lemons", count: 15 } ] }, { type: "Vegetables", collection: [ { name: "Potatoes", count: 5 }, { name: "Tomatoes", count: 9 }, { name: "Turnips", count: 8 } ] }]; $(function() { $("#listContainer").dxList({ dataSource: new DevExpress.data.DataSource({ store: fruitsVegetables, map: function(item) { return { key: item.type, items: item.collection } } }), grouped: true, itemTemplate: function(data, _, element) { element.append( $("<p>").text(data.name + " | " + data.count).css("margin", 0) ) } }); });
Angular
import { DxListModule } from "devextreme-angular"; import DataSource from "devextreme/data/data_source"; // ... export class AppComponent { fruitsVegetables = [{ type: "Fruits", collection: [ { name: "Apples", count: 10 }, { name: "Oranges", count: 12 }, { name: "Lemons", count: 15 } ] }, { type: "Vegetables", collection: [ { name: "Potatoes", count: 5 }, { name: "Tomatoes", count: 9 }, { name: "Turnips", count: 8 } ] }]; listDataSource = new DataSource({ store: this.fruitsVegetables, map: function (item) { return { key: item.type, items: item.collection } } }); } @NgModule({ imports: [ // ... DxListModule ], // ... })
<dx-list [dataSource]="listDataSource" [grouped]="true"> <div *dxTemplate="let data of 'item'"> <p style="margin:0px">{{data.name}} | {{data.count}}</p> </div> </dx-list>
If your data is not grouped at all, you can group it using the group option of the DataSource. See the Data Layer - Grouping topic for details.
jQuery
var fruitsVegetables = [ { type: "Fruits", name: "Apples", count: 10 }, { type: "Fruits", name: "Oranges", count: 12 }, { type: "Fruits", name: "Lemons", count: 15 }, { type: "Vegetables", name: "Potatoes", count: 5 }, { type: "Vegetables", name: "Tomatoes", count: 9 }, { type: "Vegetables", name: "Turnips", count: 8 } ]; $(function() { $("#listContainer").dxList({ dataSource: new DevExpress.data.DataSource({ store: fruitsVegetables, group: "type" }), grouped: true, itemTemplate: function(data, _, element) { element.append( $("<p>").text(data.name + " | " + data.count).css("margin", 0) ) } }); });
Angular
import { DxListModule } from "devextreme-angular"; import DataSource from "devextreme/data/data_source"; // ... export class AppComponent { fruitsVegetables = [ { type: "Fruits", name: "Apples", count: 10 }, { type: "Fruits", name: "Oranges", count: 12 }, { type: "Fruits", name: "Lemons", count: 15 }, { type: "Vegetables", name: "Potatoes", count: 5 }, { type: "Vegetables", name: "Tomatoes", count: 9 }, { type: "Vegetables", name: "Turnips", count: 8 } ]; listDataSource = new DataSource({ store: this.fruitsVegetables, group: "type" }); } @NgModule({ imports: [ // ... DxListModule ], // ... })
<dx-list [dataSource]="listDataSource" [grouped]="true"> <div *dxTemplate="let data of 'item'"> <p style="margin:0px">{{data.name}} | {{data.count}}</p> </div> </dx-list>
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.