How to access the value of another column in the columnDefs in an ag-Grid Angular setup?

Question

I have an ag-Grid with two columns: An ID column and a Description column. I construct the column definitions of these two columns in columnDefs in the ngOnInit() method in the TypeScript class.

In the Description column I use cellRendererFramework to render a routerLink in my ag-Grid. I use cellRendererParams to pass some necessary parameters on to my Angular renderer component. It is here in the Description column that I need to access the ID value of the ID column, and put it into cellRendererParams parameter 'resourceId'. I need this ID to be able to construct my working RouterLink.

How can I do this in the code below?

ngOnInit() {
  this.columnDefs = [

    // Column A - ID
    { 
        headerName: 'ID', 
        field: 'id', 
        width: 80, 
        sort: 'desc' 
    },

    // Column B - Description
    {
        headerName: 'Description',
        field: 'description',
        width: 150,
        cellRendererFramework: AgGridRouterLinkRendererComponent,
        cellRendererParams: {
            resourcePath: '/leverance/detail',
            resourceId: HERE-I-WOULD-LIKE-TO-ACCESS-THE-ID-VALUE-OF-THE-ID-FIELD-IN-THE-ID-COLUMN-ABOVE
    }

  ];
}

In the above code I write like this: resourceId: this.columnDefs[0].id But I get an error: 'TypeError: Cannot read property '0' of undefined.' — Rune Hansen, Dec 22 '18 at 17:43

score 4 · Answer 1 · answered Aug 13 '19 at 06:56

4

I would define column B like this:

// Column B - Description
      {
        headerName: 'Description',
        field: 'description',
        width: 150,
        cellRendererFramework: AgGridRouterLinkRendererComponent,
        cellRendererParams(params) {
          return {
            resourcePath: '/leverance/detail',
            resourceId: params.data.id
          }
        }
      }

This way you can get any fields in other columns.

answered Aug 13 '19 at 06:56

Huy Le

41
3

cellRendererParams(params) { return { resourcePath: '/leverance/detail', resourceId: params.data.id } } This helped me to get data. Thanks. – Chidambaram Aug 11 '20 at 06:34
This achieved what I was looking for, although I'm using React and I also discovered that all the params.data is being passed anyways, so you can use any data field in your component without even passing it separately. – Ben in CA Dec 17 '21 at 17:26

score 0 · Accepted Answer · answered Dec 30 '18 at 13:50

I did not find a way to access the Id value inside ngOnInit() in the columnDefs. Instead I could get it in the agInit() method in the AgRendererComponent.

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

ag-grid-router-link-renderer.component.ts

import { Component } from '@angular/core';
import { AgRendererComponent } from 'ag-grid-angular';

@Component({
  template: `
    <a [routerLink]="[params.resourcePath, resourceId]">{{
      params.value
    }}</a>
  `
})
export class AgGridRouterLinkRendererComponent implements AgRendererComponent {
  params: any;
  resourceId: number;
  agInit(params: any): void {
    this.params = params;
    this.resourceId = params.data.id;
  }
  refresh(params: any): boolean {
    return false;
  }
}

How to access the value of another column in the columnDefs in an ag-Grid Angular setup?

2 Answers2