Change Default Group Caption based on condition in Angular Grid

1 min read

Default group caption content can be customized using the captionTemplate feature of Angular 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.

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