Ag-grid: Asynchronous valueFormatter?

Question

I have a seemingly simply problem that has plagued me for several days. Apparently no one else in the history of ag-grid has ever had this problem as the complete lack of Google search results would suggest.

I'm trying to implement a simple value formatter for one of my columns. Here is the column definition...

    ...
    {
      headerName: 'OT Unit', 
      field: 'otUnitCode', 
      valueFormatter: this.formatOTUnit.bind(this)
    },
    ....

The helper function 'this.formatOTUnit(...)' is defined as such:

  formatOTUnit(params) {
    console.log(params);
    this.service.getOTUnitDesc(params.data.otUnitCode).subscribe((desc) => {
      console.log(desc);
      return desc;
    });
  }

Basically this function takes the numeric code that is stored in the JSON, and calls an asynchronous function to get the corresponding description. This description is what I want to display inside the table cell (not the numeric code).

console.log(params) shows me the event object, which contains the code that needs to be translated (params.data.otUnitCode), and console.log(desc) shows the correct description. However, the cell in the table is blank.

What am I missing here? Does ag-grid not support asynchronous callbacks as a valueFormatter?

Your formatOTUnit function is a void function, doesn't actually return anything since desc is still scoped to getOTUnitDesc. But that's besides the point, valuegetter and valueformatter will just return the observable object as they are synchronous. Use a cell renderer - they are more flexible and support asynchronicity. ag-grid.com/javascript-grid-cell-rendering-components — nullptr.t
@nullptr.t - Changing valueFormatter to cellRenderer still produces the same result. — brianbad
@brianbad have you tried forcing the refresh on Ag-grid? or maybe formatting the data before passing it to ag-grid? — maury844
Can you post the code now that you've tried using a cellRenderer? If you implemented ICellRendererComp interface correctly into your cell renderer class you would've seen the refresh method... — nullptr.t
@maury844 - I have tried refreshing the grid but to no avail, though I hadn't considered formatting the data beforehand. How would you do something like that? In my HTML, I just have the <ag-grid-angular...> tag and it just starts loading automatically. How do you prevent the grid from loading initially? — brianbad

awdorrin awdorrin · Accepted Answer · 2020-01-23T19:24:12

Issue seems to revolve around the 'this' global reference not being accessible within a cell renderer, so the 'this.service' is undefined.

I did more research and found one possible solution. First, gridOptions needs a context defined that has a reference to the service component.

this.gridOptions = {
  pagination: true,
  paginationAutoPageSize: true,
  context: {
    myService: this.myService
  }

Then, in the cell renderer:

otUnitRenderer(params) {
  var obsValue = undefined;
  var sub = params.context.myService.getOTUnitDesc(params.value).subscribe(v => obsValue = v);
  sub.unsubscribe();
  return "<span>" + params.value + " : " + obsValue +"</span>";
}

Ag-grid: Asynchronous valueFormatter?

1 Answers