How to hide expand/collapse icon for groups with single item

While grouping columns some groups might have single item in them and for such cases, it is possible to hide the expand/collapse icon. This can be achieved by setting the css icon content to empty for the groups with single items in the dataBound event.

Initially the element of groups with single item is returned which can be done using the title attribute value of the element. Then a new class is added to its previous sibling element which contains the icon class.

<script>
// DataBound event function
function OnDataBound(args) {
    // Returns element of groups with single item
    this.element.querySelectorAll('.e-gridcontent .e-table td[title*="1 item"]').forEach(el => {
         // New class is added to the element’s previous sibling
         el.previousSibling.classList.add("group-hide");
    });
}
</script>

Now based on the newly added class, the icon content is overridden with empty value.

<style>
// Overriding the icon content based on the added class
.group-hide .e-icons::before {
        content: '' !important;
}
</style>

Also, pointer events are set to none for this new class to prevent selection.

<style>
// Pointer events disabled for icon
.group-hide {
       pointer-events: none;
}
</style>

Output

JavaScript sample