Change Default Group Caption based on condition in Vue Grid
This article explains how to change the default group caption based on a condition in Vue Grid. Default group caption content can be customized using the captionTemplate feature of Vue 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, 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.
methods: {
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 = "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);
}
}
}
}
Output
Refer to the working sample for additional details and implementation: Vue Sample
Documentation:
https://ej2.syncfusion.com/vue/documentation/grid/grouping/#caption-template
