JavaScript/jQuery 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.
JavaScript
- 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 }
- ]
- }];
- $(function() {
- $("#listContainer").dxList({
- 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 + " | " + groupData.overallCount)
- )
- },
- itemTemplate: function(data, _, element) {
- element.append(
- $("<p>").text(data.name + " | " + 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.