We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Platform: JavaScript - EJ 2 |
Control: Grid

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.

// 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


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

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


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

// Pointer events disabled for icon
.group-hide {
       pointer-events: none;


Hide icon for groups with single item

JavaScript sample

You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile