Ag-grid - Is value parser ignored when having custom cell editor?

Question

I use ag-grid with Angular v7 and I am having some issues with value parser, which I wanted to use with custom cell editor.

When I declare custom cell editor value parser seems to be simply ignored. I hardcoded it to always return the same value, no matter the params, and it does it - when I delete cellEditor from my column definition. Once there is custom editor declared, parser seems to no longer be working - it does not have any effect on saved value. It is not even called - I tried to log something in it and it is not visible in the console when a custom editor is there.

Correct me if I'm wrong, but this is not expected behavior, or is it? Sine in docs value parser and setter are mentioned in Cell Editing article, so I assume they should be working together.

Answer 1

I had the exact same doubt when implementing custom cell editor where the valueParser seemed to be ignored completely by the grid. So after looking through the ag-grid documentation I found a solution. The params object provided to the agInit method of the cell editor has the following property in it.

  parseValue: (value: any) => any;

This function is the same ValueParser you have written in the column's colDef. Call parseValue() on the returned data inside the getValue method of your custom cell editor.

Answer 2

@abd995 is correct that parseValue points to the function in the column definition. However, there's no way to call parseValue from within the getValue function if you follow their interface definition the way the documentation has it, as the samples they provide don't help e.g. xxx.prototype.getValue = function....

Instead, within the init function, you need to declare the getValue call within it to access the params object.

For example:

CodeValueEditor.prototype.init = function (params) {

        this.container = document.createElement('input');
        this.container.classList.add('ag-cell-edit-input');


        this.container.value = params.value;

        this.getValue = function () {
            var parseResult = params.parseValue(this.container.value);

            if (parseResult)
                return this.container.value;

            return params.value;
        };

By checking the result you can then either return the new value - or if it failed return the original by returning params.value.

I've not tested it extensively yet, but it appears to work and allows me to use the custom editor and utilise the column definition's value parser.

Hope this helps! Ps. You might have to adjust the above 'this' for scope.