ag-grid cell renderer that shows data from multiple columns

Question

I'm trying to create a cell renderer that will take data from other columns.

For example, each row signifies some piece of data, and users should be able to open it depending on their permissions, and a restricted piece of data should be rendered differently than a non-restricted element. Other columns will have an affect on rendering this one column as well.

I would expect to be able to access the other columns' data using the path this.params.node.data.restricted, and this works during a click event, but I can't seem to have access to this data during the rendering phase of the component.

"columnDefs": [
    {
      "field": "id",
      "width": 40,
      "checkboxSelection": true
    },
    {
      "headerName": "Title",
      "field": "docTitle",
      "width": 1580,
      "cellRenderer": "detailViewRenderer"
    }
  ]

import {Component} from "@angular/core";
import {ICellRendererAngularComp} from "ag-grid-angular";

@Component({
  selector: 'detail-view-renderer',
  styles: [``],
  template: `
    <a class="restricted" *ngIf="params.node.data.restricted">{{params.value}}</a>
    <a class="not-restricted" *ngIf="!params.node.data.restricted">{{params.value}}</a>
  `
})
export class DetailViewRendererComponent implements ICellRendererAngularComp {
  public params: any;

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

  constructor() {}

  refresh(): boolean {
    return false;
  }
}

I think ideally, what I'd like to do is set the columns that will be passed into my renderer and access them in the component somehow as parameters. Is that possible or do we have some other workaround? I see Full Width Rows as an option, but that renders the entire row as one column.

wentjun wentjun · Accepted Answer · 2019-01-29T17:16:55

I think you can access other row properties by using params.data.restricted, instead of params.node.data.restricted.

For example,

method() {
 const detailViewRenderer = params => {
   return `<span>${params.data.restricted}</span>`;
 };


 this.columnDefs: [
    {
      "field": "id",
      "width": 40,
      "checkboxSelection": true
    },
    {
      "headerName": "Title",
      "field": "docTitle",
      "width": 1580,
      "cellRenderer": "detailViewRenderer"
    }
 ]
}

Documentation

ag-grid cell renderer that shows data from multiple columns

2 Answers