How to disable row group expand functionality on one row?

Question

After a lot of searches in SO without any particular solution, I am compelled to ask this question. What I want is to hide a row group icon on a single group row. Like in the below picture I have a group row that has only one record, which is already shown in the top row. I want to hide that collapse icon on that single record. Only collapse/expand icon shown when group rows are more than one.

For reference see AG-Grid Master-Detail Section, here they specify which rows to expand. Same functionality I needed here.

I'm using the below versions of AG-Grid Angular (v9)

"@ag-grid-community/core": "^25.3.0",
"@ag-grid-enterprise/row-grouping": "^26.0.0",
"@ag-grid-enterprise/server-side-row-model": "^25.3.0",
"ag-grid-angular": "^25.3.0",
"ag-grid-community": "^25.3.0",

Here is my code:

this.rowModelType = 'serverSide';
this.serverSideStoreType = 'partial';
this.cacheBlockSize = 20;
this.gridOptions = {
  rowData: this.loanlist,
  columnDefs: this.generateColumns(),
  getNodeChildDetails: function(rowItem) {
    if (rowItem.orderCount > 1) {
      return {
        expanded: true
      }
    } else {
      return null;
    }
  }
}

The issue is the getNodeChildDetails is not accessible. Browser console showing me the below warning and my above code is not working.

Sewel

Answer 1

This is simple to achieve using a cellRendererSelector on the autoGroupColumnDef. You can specify whether to show the default agGroupCellRenderer or simply return another renderer (or, just return null):

    this.autoGroupColumnDef = {
      cellRendererSelector: (params) => {
        if (params.value == 'United States') {
          return null;
        } else {
          return {
            component: 'agGroupCellRenderer',
          };
        }
      },
    };

In the example below, we are disabling the row group expand functionality on the United States row.

See this implemented in the following plunkr.

Halfcock

Simple and straightforward answer what I wanted but I'm going to apply @un.spike answer as he describes in detail. maybe I need that one if I want to show extra detail in my grouped column. – Sewel

Works great, however the row will still be expanded if the expandAll method from the GridApi is called – Yolondayon

Answer 2

The solution isn't that hard - but could be tough, agreed (one day faced with the same case)

So - the answer is custom cell renderer.

It would look a little bit different (separate column for collapse\expande action) - but you would get all control of it.

Custom rendeder component for this action would look like :

template: `
    <em 
        [ngClass]="{'icon-arrow-down':params.node.expanded, 'icon-arrow-right': !params.node.expanded}" 
        *ngIf="yourFunctionHere()" 
        (click)="toggleClick()">
    </em>`,

export class MasterDetailActionComponent implements ICellRendererAngularComp {
    private params: any;

    agInit(params: any): void {
        this.params = params;
    }

    public toggleClick(): void {
        this.params.node.setExpanded(!this.params.node.expanded);
    }

    public yourFunctionHere(): boolean {
        // so here you are able to access grid api via params.api
        // but anyway params.node - would give you everything related to row also 
    }

    refresh(): boolean {
       return false;
    }
}

in [ngClass] - you are able to handle the visual part (icons) - modify\customize

and don't forget to add this component in the gridOptions:

frameworkComponents: {
    'masterDetailActionCellRenderer': MasterDetailActionComponent,
}

and include this column in your columnDef:

columnDefs: [
    headerName: "",
    width: 75,
    field: "expand",
    cellRenderer: "masterDetailActionCellRenderer",
    filter: false,
    resizable: true,
    suppressMenu: true,
    sortable: false,
    suppressMovable: false,
    lockVisible: true,
    getQuickFilterText: (params) => { return '' }
]

Tractable