Change Default Group Caption based on condition in ASP Core Grid

Default group caption content can be customized using the captionTemplate feature of ASP Core Grid groupSettings. You can customize the group caption content based on the condition for specific values. This can be achieved using the dataBound event of the Grid. In the dataBound event, the custom icons have been rendered in the group caption based on the grouped column values.

The caption template for the boolean 'Verified' column has been changed based on the condition in the following demo.

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowGrouping="true" dataBound="dataBound"> 
    <e-grid-groupsettings captionTemplate="#captiontemplate" columns="@(new string[] {"Verified"})"></e-grid-groupsettings>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="OrderID" textAlign="Right" width="100" isPrimaryKey="true"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" format="C2" width="120"></e-grid-column>       
        <e-grid-column field="Verified" headerText="Verified" width="120"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
 
<script id="captiontemplate" type="text/x-template">
    ${groupTemplate(data)}
</script>
<script type="text/javascript">
    function groupTemplate(args) {
        if (args.field == "Verified") {
            return args.key;
        }
    }
</script>
<script>
function dataBound(args) {
  var captionTemplate = document.getElementsByClassName('e-groupcaption');
  for (var i = 0; i < captionTemplate.length; i++) {
      if (captionTemplate[i].innerText == 'false') {
          var node = document.createElement('span');
          node.className = 'e-icons e-search';
          node.width = '50px';
          node.height = '50px';
          node.style.position = 'absolute';
          node.style.marginLeft = '5px';
          node.style.paddingTop = '3px'
          captionTemplate[i].appendChild(node);
       } else {
          var element = document.createElement('span');
          element.className = 'e-icons e-upload';
          element.width = '50px';
          element.height = '50px';
          element.style.position = 'absolute';
          element.style.marginLeft = '5px';
          element.style.paddingTop = '3px';
          captionTemplate[i].appendChild(element);
       }
   }
}
</script>
<style>
.e-icons.e-false:before {
     content: '\e60a';
 }
 .e-true:before {
        content: '\e614';
  }
</style>