How to hide expand/collapse icon for groups with single item in JavaScript Data Grid?

This article explains how to hide the expand/collapse icon for groups with a single item in JavaScript Grid.

While grouping columns, some groups might have a single item in them, and for such cases, it is possible to hide the expand/collapse icon in the JavaScript Data Grid. 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 a 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