如何从 ag-grid 中的 valueFormatter 调用异步 function

Question

I have an ag-grid table, and I have a column in it with value formatter:

{
    headerName: "My column",
    valueFormatter: getFormattedIndexValue,
    ...
}

From getFormattedIndexValue I try to call async function:

async function getFormattedIndexValue (params) {
    if (!params.value) return;
    return await getDecodedValue(table, params.colDef.field, params.value);
}

This is the code of async function, I try to call:

async function getDecodedValue(table, field, value) {
    const query = `function=decode&table=${table}&field=${field}&value=${value}`;
    const response = await fetch('routines.php', { method: 'post', body: query, headers: {"Content-Type": "application/x-www-form-urlencoded"}});
    return response.text();
}

But in this way valueFormatter doesn't return correct value, resulting in [Object Promise] . Is there a way to call async function from valueFormatter and to get proper result

Answer 1

valueFormatter doesn't suit for it, but instead, you can create cellRenderer and you would be able to handle needed logic inside.

but as I understood, you wanna have kind of reference (key to value, id(as key) on database and value(as displayed value) on view grid) - am I right?

If so, ( valueFormatter and valueParser should be used) but without an async call, you need to have your key-value pair (dictionary) on grid-init process.

Here is my example:

on ag-grid init process I'm saving dictionary for columns in config.ComboData

valueFormatter = (params) => {
    return this.lookupValue(config.ComboData['columnNameHere'], params.value);
};
valueParser = (params) => {
     return this.lookupKey(config.ComboData['columnNameHere'], params.newValue);
}

valueFormatter and params.value - used when ag-grid rendering the value.

valueParser and params.newValue - when you are updating the cell value.

and here looupValue and lookupKey functions from ag-grid doc and the sample

lookupValue(mappings, key:string) {
    return mappings[key];
}

lookupKey(mappings, name) {
    for (var key in mappings) {
        if (mappings.hasOwnProperty(key)) {
            if (name === mappings[key]) {
            return key;
            }
        }
    }
}

Answer 2

this is an old post but I hope this answer can help others because it helped me a lot.

I was using an async function to retrieve the data via Fetch to the Cell of the table. No matter what I did, I always got [Object Promise] Then I used cellRenderer instead of ValueFormatter

I give an example here. I have some data with some people and their company ID's, I don't want the user to see company IDs in the table, I want them to see the company names instead. These are the columns, I set the "company_id" field with cellRenderer ":

var columnDefsCuotas = [
       { field: 'user_id', width: 150 },
       { field: 'name', width: 250 },
       { field: 'company_id', width: 250, 
         cellRenderer: GetCompanyName
       }
 ]

Then I create a class called GetCompanyName Here I can render each cell of the table to print the name of the company instead of the ID of the company. I put the fetch in this class to retrieve the data:

class GetCompanyName {
    // gets called once before the renderer is used
    async init(params) {

        // create the cell
        this.eGui = document.createElement('div');
        this.eGui.innerHTML = `<span class="my-value"></span>`;

        // get references to the elements we want
        this.eValue = this.eGui.querySelector('.my-value');
    
        // set value into cell
        this.cellValue = this.getValueToDisplay(params);
        this.eValue.innerHTML = await getName(this.cellValue);
        
        async function getName(company_id) {
            let result = await fetch(`/fetch_companies?company_id=${company_id}`)
            let response = await result.json()
            console.log(response) // See if it is fetching the desired response data
            return response.company_name // I return only the parameter of the object I need to see
        }
    }
  
    getGui() {
        return this.eGui;
    }
  
    getValueToDisplay(params) {
        return params.valueFormatted ? params.valueFormatted : params.value;
    }
}

I hope it helps. It worked like a charm for me