In ag grid drop down, how to show name once selected and on save set value instead of name.?

Question

Using this reference, I had worked ag grid drop down.

Issue : once I selected a drop down value, then getvalue() returns value instead of name. Hence it shows the number on the column and it should be text.

If I change that to name, while saving, its bind to name . But here it should be value.

Required : getValue should return name & saving the array should contain value.

agInit(params: any): void {
    this.params = params;
    this.value = this.params.value;
    this.name = this.params.name;
    this.options = params.options;

}

getValue(): any {
    return this.value;
}

ngAfterViewInit() {
    window.setTimeout(() => {
        this.input.element.nativeElement.focus();
    })
}

stackbltiz here here

How can I achieve this.

Answer 1

You don't have to create new cellRenderer and cellEditor for it, ag-grid provides inbuilt select for it. **

When you using objects (for dropdown\combobox) inside single cell - you have to implement value handlers: valueParser and valueFormatter:

Value parser: After editing cells in the grid you have the opportunity to parse the value before inserting it into your data. This is done using Value Parsers.

colDef.valueParser = (params) => {
    return this.lookupKey(mapping, params.newValue);
}

Value formatter: Value formatters allow you to format values for display. This is useful when data is one type (e.g. numeric) but needs to be converted for human reading (e.g. putting in currency symbols and number formatting).

colDef.valueFormatter = (params) => {
    return this.lookupValue(mapping, params.newValue);
}

*where mapping represents your object and inside each of those functions you are just extracting key or value.

Original solution:

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

lookupKey(mappings, name) {
    var keys = Object.keys(mappings);

    for (var i = 0; i < keys.length; i++) {
        var key = keys[i];

        if (mappings[key] === name) {
        return key;
        }
    }
}

and here my little bit modified:

lookupValue(mappings, key:string) {
    if(!mappings || !mappings.find(item => item.Id == key)) return null;
    else
        return mappings.find(item => item.Id == key).Value;
}

lookupKey(mappings, name) {
    let key: any;
    for (key in mappings) {
        if (mappings.hasOwnProperty(key)) {
            if (name === mappings[key]) {
                return key.Id;
            }
        }
    }
}

UPDATE

To populate dropdown you need yo use cellEditorParams:

colDef.cellEditor = 'selectCellEditor';
colDef.cellEditorParams = {
    values: yourList,
},

** But in case when it could be required you still need to have both of renderers and store object inside, and then you would be able to choose what would be displayed on every stage.