How to customize aggroupcellrenderer.

[ajaynitm10]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/ceolter/ag-grid-enterprise/blob/master/CONTRIBUTING.md#question

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• ag-Grid-Enterprise version: 2.0.X

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[ajaynitm10]

I want to customize aggroupcellrenderer with my icon and functionality. In documentation they mentioned, If you don't like the grid provided group cell renderer, you can build your own cell renderer and provide the grouping functionality. If you do this, then take a look at the grid's source code and see how we implemented the ag-Grid group cell renderer. But I didn't get anything from this.

[chaomao]

I also interested about this ticket, @ajaynitm10 do you have any update?

[ZiTsi]

You may use custom icons to change the icon in the AgGroupRender and the innerRenderer of the cellRendererParams to alter the functionality.

[xBATx]

Hi guys,

I think that the custom group cell renderer could look like below:

@Component({
  selector: 'sh-master-group-cell',
  template: `
    <div class="row" (click)="toggle()">
      <span class="title">{{getTitle()}}</span>
    </div>
  `,
  styles: [
    `
      .row {
        cursor: pointer;
        display: flex;
        width: 1000px;
        justify-content: space-between;
      }

      .title {
        font-size: 16px;
        font-weight: bold;
      }
    `,
  ],
})
export class MasterCellRendererComponent implements ICellRendererAngularComp {
  node: RowNode;

  toggle() {
    this.node?.setExpanded(!this.node?.expanded)
  }

  getTitle() {
    if (this.node?.expanded)
      return "Collapse";

    return "Expand";
  }

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

  refresh(): boolean {
    return false;
  }
}