Angular TagBox - Customize Group Headers
To customize group headers, specify a groupTemplate. If the template is unspecified, group headers display the key data field in bold font.
jQuery
JavaScript
const fruitsVegetables = [{ // ... }]; $(function() { $("#tagBoxContainer").dxTagBox({ dataSource: new DevExpress.data.DataSource({ store: fruitsVegetables, map: function(groupedItem) { let overallCount = 0; groupedItem.items.forEach(function(item) { overallCount += item.count; }); return $.extend(groupedItem, { overallCount: overallCount }) } }), grouped: true, groupTemplate: function(groupData, _, groupElement) { groupElement.append( $("<p>").text(groupData.key + " | Count: " + groupData.overallCount) ) }, displayExpr: 'name', valueExpr: 'count' }); });
Angular
HTML
TypeScript
<dx-tag-box [dataSource]="tagBoxDataSource" [grouped]="true" groupTemplate="group" displayExpr="name" valueExpr="count"> <div *dxTemplate="let data of 'group'"> <p>{{data.key}} | Count: {{data.overallCount}}</p> </div> </dx-tag-box>
import { DxTagBoxModule } 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 } ] }]; tagBoxDataSource: DataSource = new DataSource({ store: this.fruitsVegetables, map: function(groupedItem) { let overallCount = 0; groupedItem.items.forEach(function(item) { overallCount += item.count; }) return Object.assign(groupedItem, { overallCount: overallCount }); } }); } @NgModule({ imports: [ // ... DxTagBoxModule ], // ... })
Vue
<template> <DxTagBox :data-source="tagBoxDataSource" :grouped="true" group-template="group" display-expr="name" value-expr="count"> <template #group="{data}"> <p>{{data.key}} | Count: {{data.overallCount}}</p> </template> </DxTagBox> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxTagBox } from 'devextreme-vue/tag-box'; import DataSource from "devextreme/data/data_source"; const 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 } ] }]; export default { components: { DxTagBox }, data() { return { tagBoxDataSource: new DataSource({ store: fruitsVegetables, map: function(groupedItem) { let overallCount = 0; groupedItem.items.forEach(function(item) { overallCount += item.count; }) return Object.assign(groupedItem, { overallCount: overallCount }); } }) }; } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { TagBox } from 'devextreme-react/tag-box'; import DataSource from "devextreme/data/data_source"; const 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 } ] }]; const renderGroup = (data) => { return ( <p>{data.key} | Count: {data.overallCount}</p> ); }; class App extends React.Component { constructor(props) { super(props); this.tagBoxDataSource = new DataSource({ store: fruitsVegetables, map: function(groupedItem) { let overallCount = 0; groupedItem.items.forEach(function(item) { overallCount += item.count; }) return Object.assign(groupedItem, { overallCount: overallCount }); } }); } render() { return ( <TagBox dataSource={this.tagBoxDataSource} grouped={true} displayExpr="name" valueExpr="count" groupRender={renderGroup} /> ); } } export default App;
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.