Change Default Group Caption based on condition in React Grid
This article explains how to change default group caption based on conditions in React Grid. Default group caption content can be customized using the captionTemplate feature of React Grid groupSettings. You can customize the group caption content based on condition for specific values. This can be achieved using the dataBound event of the Grid. In the dataBound event, 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() {
var captionTemplate = document.getElementsByClassName('e-groupcaption');
for (var i = 0; i < captionTemplate.length; i++) {
if (captionTemplate[i].innerText == 'false') {
var firstIcon = document.createElement('span');
firstIcon.className = 'e-icons e-search';
firstIcon.width = '50px';
firstIcon.height = '50px';
firstIcon.style.position = 'absolute';
firstIcon.style.marginLeft = '5px';
firstIcon.style.paddingTop = '3px';
captionTemplate[i].appendChild(firstIcon);
} else {
var secondIcon = document.createElement('span');
secondIcon.className = 'e-icons e-upload';
secondIcon.width = '50px';
secondIcon.height = '50px';
secondIcon.style.position = 'absolute';
secondIcon.style.marginLeft = '5px';
secondIcon.style.paddingTop = '3px';
captionTemplate[i].appendChild(secondIcon);
}
}
}
Output
Refer to the working sample for additional details and implementation: React Sample
Documentation: https://ej2.syncfusion.com/react/documentation/grid/grouping/#caption-template
