Angular List - Customize Group Headers
You can define a groupTemplate to customize group headers. Without a groupTemplate, group headers display the text of the key field in bold font.
HTML
TypeScript
- <dx-list
- [dataSource]="listDataSource"
- [grouped]="true"
- groupTemplate="group"
- itemTemplate="item">
- <div *dxTemplate="let itemObj of 'item'">
- <p style="margin:0px">{{itemObj.name}} | {{itemObj.count}}</p>
- </div>
- <div *dxTemplate="let groupObj of 'group'">
- <p>{{groupObj.key}} | {{groupObj.overallCount}}</p>
- </div>
- </dx-list>
- import { DxListModule } from "devextreme-angular";
- import DataSource from "devextreme/data/data_source";
- // ...
- 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 }
- ]
- }];
- listDataSource = new DataSource({
- store: fruitsVegetables,
- map: function(groupedItem) {
- let overallCount = 0;
- groupedItem.items.forEach(function(item) {
- overallCount += item.count;
- })
- return Object.assign(groupedItem, { overallCount: overallCount });
- }
- });
- }
- @NgModule({
- imports: [
- // ...
- DxListModule
- ],
- // ...
- })
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.