Change Default Group Caption based on condition in JavaScript Grid
This article explains how to change the default group caption based on a condition in the JavaScript Grid.
Default group caption content can be customized using the captionTemplate feature of Javascript 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.
function bound(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 = '4px';
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);
}
}
}
Output:
You can find the sample here: Javascript Sample
Documentation
https://ej2.syncfusion.com/documentation/grid/grouping/#caption-template
https://ej2.syncfusion.com/documentation/api/grid/#databound
