ag-Grid: valueFormatter exception

Question

I’m dynamically building my ag-Grid columns from data received via a web service (here is a snippet of my code where I am building up my column definitions; see plunker for entire example):

for (let i = 0; i < cr.attributes.length; i++) {

    let displayAlignment = '';
    switch (cr.attributes[i].dispAlign) {
        case 'C':
            displayAlignment = 'center';
            break;
        case 'L':
            displayAlignment = 'left';
            break;
        case 'R':
            displayAlignment = 'right';
            break;
        default:
            throw new Error('this will never happen, dispAlign for database must have value');
        }

    const displayMask = cr.attributes[i].dispMask;
    // console.log('displayMask: ', displayMask);
    const dataType = cr.attributes[i].dataType;
    // console.log('dataType: ', dataType);

    // console.log('cr attributes: ' , cr.attributes );
    childColDefsString = childColDefsString +
        '{"field": "' + cr.attributes[i].label + '"' +
        ', "cellStyle": {"textAlign": "' + displayAlignment + '"}' +
        ', "valueFormatter": "this.customValueFormatter(datatype, displayMask)"' +
        ', "width": 175, ' + '"hide": ' + cr.attributes[i].hide + '},';
}

As I build up my columns I add a cellStyle for column justification based on the column type received from the web service (which is working as expected). I’m also trying to add a valueFormatter that attempts to call a custom formatter. Unfortunately, as the rowData is applied (by clicking the "Apply Row Data" button) to the grid I'm encountering the following ag-Grid thrown exception (seen via Chrome -> Inspect -> Console):

Processing of the expression failed ag-grid.js:10595 
Expression = customValueFormatter(datatype, displayMask) ag-grid.js:10596 
Exception = ReferenceError: customValueFormatter is not defined

Here is a url to a Plunker example I'v created: https://plnkr.co/edit/LcA5dRU9g8huLUWv3syZ?p=preview

I've tried several iterations of an ag-Grid example, https://www.ag-grid.com/javascript-grid-value-setters/ , to no avail.

un.spike un.spike · Accepted Answer · 2019-02-28T07:45:11

Not exactly sure why you are operating with string inside buildAvailableFields.

parentColDefsString = parentColDefsString +
                    '{"headerName": "' + cr.label + '", ' +
                    '"children": [';

Anyway, it's not an issue as you are facing.

Exactly in your case, you have an error here :

"valueFormatter": "this.customValueFormatter(datatype, displayMask)"'

Here you've mixed input properties and forgot to put params value. If you wanna to add additional input parameters to valueFormatter function you should wrap it into inner function

valueFormatter: (params) => this.customValueFormatter(params, datatype, displayMask);

-- or pure JS

valueFormatter: function(params) {
    this.customValueFormatter(params, datatype, displayMask);
}

But in case of 'string' concatenation, this function wouldn't be evaluated.

And the next question is :

Why just not operate with standart structure, it would be much easier.

columnRequest.forEach(columnData=>{
    // your parent
    let column: ColDef={
        headerName: columnData.label,
        children:[]
    }
    // handle children
    column.attributes.forEach(childrenColumnData=>{
        let childrenColumn:ColDef={
            headerName: childrenColumnData.label,
            field: childrenColumnData.label
        }
        // condition for valueFormatter if it needed
        if(true){
            childrenColumn.valueFormatter = (params)=>this.customValueFormatter(params, yourAdditionalValue1, yourAdditionalValue2);
        }
    })
    this.colums.push(column);
}

ag-Grid: valueFormatter exception

1 Answers