Ag-grid(Angular 2) Cannot access component fields in CellRenderer

Question

I'm facing this issue while trying to call a service method on the click event of a button that is created using cellRenderer.

I'm using ag-grid with Angular2.

{ headerName: 'Update', field: "update", width: 80, cellRenderer : this.updateRecord }


updateRecord(params) {
    var eDiv = document.createElement('div');
    eDiv.innerHTML = '<span class="my-css-class"><button class="edit">Edit</button></span>';
    var eButton = eDiv.querySelectorAll('.edit')[0];
    eButton.addEventListener('click', function() {
      this.myService.getAll().subscribe(data => console.log(JSON.stringify(data)))
    });
    return eDiv;
  }

I'm getting the following error :

EXCEPTION: Cannot read property 'getAll' of undefined

Also, I'm not able to access any of my Component variables.

Sefa · Accepted Answer · 2016-11-03 07:13:21Z

11

cellRenderer is in different context, so this is not accessible in updateRecord function.

You need to initialize context parameter in gridOptions and use it in params object.

set context in your gridOptions object in this way

this.gridOptions.context = {
            myService: this.myService
        }

Your myService will be available in context property.

updateRecord(params) {
    var eDiv = document.createElement('div');
    eDiv.innerHTML = '<span class="my-css-class"><button class="edit">Edit</button></span>';
    var eButton = eDiv.querySelectorAll('.edit')[0];
    eButton.addEventListener('click', function() {
      params.context.myService.getAll().subscribe(data => console.log(JSON.stringify(data)))
    });
    return eDiv;
  }

answered Nov 3, 2016 at 7:13

Sefa

9,05210 gold badges54 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Akshay Rana Over a year ago

Thank you. Worked perfectly fine.

Collectives™ on Stack Overflow

Ag-grid(Angular 2) Cannot access component fields in CellRenderer

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related