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)
  • )
  • }
  • });
  • });

View Demo

See Also