How to hide expand/collapse icon for groups with single item in JavaScript Grid?
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
I hope you enjoyed learning about how to hide expand/collapse icon for groups with single item in JavaScript Grid.
You can refer to our JavaScript Grid feature tour page to know about its
other groundbreaking feature representations and documentation, and how to quickly get
started for configuration specifications. You can also explore our JavaScript Grid example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or
require clarifications, please let us know in the comments section below. You
can also contact us through our support forums, Direct-Trac,
or feedback portal. We are always happy to assist
you!
