JavaScript/jQuery SelectBox - Customize Group Headers

By default, group headers display text of the key field in a bold font. If you need a more flexible solution, specify groupTemplate.

JavaScript
  • const fruitsVegetables = [{
  • // ...
  • }];
  •  
  • $(function() {
  • $("#selectBoxContainer").dxSelectBox({
  • 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'
  • });
  • });

View Demo

See Also