Select ag-grid cellEditor cell with object values

Question

I want to select from the list of users:

user.ts

export class User
{
    constructor (public id: number, public userName : string){}
}

the column definition is as follows:

this.columns = [
                {headerName: "Assigned", field:"user.userName", 
                 editable: true ,cellEditor: "select", 
                 cellEditorParams: {values : this.users.map(u=> u.userName)},
] 

I want to be able to select a user from the list and get an object in a cellValueChanged.

Is there an option in which there userwill be a field, not a string value, and will be displayed in the cell user.username?

Answer 1

Finally, I found a workaround to get the 'select'job done with keyand value.

var colorsNames = [];
colors.forEach(color=> {
  colorsNames.push(color.name);
})
...

{
  headerName: "Color",
  field: "colorId",
  width: 150,
  editable: true,
  cellEditor: 'select',
  cellRenderer: function (data: any) {
    var color = colors.find(color => color.id == data.value || color.name == data.value);
    // here I've added the check for 'color.id' and 'color.name' because initailly from DB will com the id and afterwards form selectparams will come the name
    return color.name;
  },
  onCellValueChanged: function (data: any) {
    /**
     * because 'select' does not offer us the possibility to use 'key-value' as traditional,
     * we will use only values in 'select' and changed to 'id' when will be saved.
     */
    var serviceTypeName = data.data.serviceTypeId;
    data.data.serviceTypeId = serviceTypes.find(serviceType => serviceType.name == serviceTypeName).id;
  },
  cellEditorParams: {
    values: colorsNames
  }
},

, select params , id name. , , name - .

, , , select - . , .

@Yonatan Lilling , , .

Answer 2

javascript https://www.ag-grid.com/javascript-grid-reference-data/?framework=angular#gsc.tab=0

i :

var Etat_acces = {"1": "Annulée", "2": "Validée", "3": "A valider CEX", "4": "Demandée", "5":"Initialisée"};

Defs:

{
headerName: "Etat Ni", field: "etat_acces", editable: true, cellEditor:'select',

            cellEditorParams: {
                values: extractValues(Etat_acces)
            },
            valueFormatter: function (params) {
                return lookupValue(Etat_acces, params.value);
            },
            valueParser: function (params) {
                return lookupKey(Etat_acces, params.newValue);
            }

}

:

function extractValues(mappings) {
return Object.keys(mappings);
}

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

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

, ;)