Using agGroupCellRenderer with custom cell renderer in angular 9

user_1421329 0
Viewed 762

I want to use custom cell renderer on the column where i have added colDef, rowGroup = true. The custom cell renderer is not displaying the content from html template of cell renderer framework.

When I use agGroupCellRenderer it works fine but when i use custom renderer it does not show content.

ag-grid-angular angular
1 Answers

You can write a cell render component

This is the ts file


export class AgExpandCellRenderComponent implements OnInit, ICellRendererAngularComp {
  params;
  isExpand: boolean = false;

  constructor() { }
  refresh(params: any): boolean {
    this.isExpand = params.node.expanded;
    return true;
  }
  agInit(params: ICellRendererParams): void {
    this.params = params;
  }
  afterGuiAttached?(params?: IAfterGuiAttachedParams): void {
  }

  ngOnInit(): void {
  }

  toggleExapnd() {
    this.params.node.setExpanded(!this.isExpand);
    this.isExpand = !this.isExpand;
  }

}

This is the template

<div>
  <div>
    <span class="ag-group-expanded" *ngIf="isExpand" (click)="toggleExapnd()" ref="eExpanded"><span
        class="ag-icon ag-icon-expanded" unselectable="on"></span></span>
    <span class="ag-group-contracted" *ngIf="!isExpand" (click)="toggleExapnd()" ref="eContracted"><span
        class="ag-icon ag-icon-contracted" unselectable="on"></span></span>
  </div>
  <div>
    {{You customized content here}}
  </div>
</div>

Then add this component to gridOptions.frameworkComponents like this

frameworkComponents: {
  'ExpandCellRender': AgExpandCellRenderComponent
},

Finnally the colDef

{
  field: 'field',
  cellRendererSelector: (params) => {
    return {
        component: 'ExpandCellRender'
    };
},

user_50388630
Related