ag-grid cellEditor select with object values

Question

I want to select from a list of users:

user.ts

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

the column definition look like this:

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 in cellValueChanged the object.

Is there an option that the user will be the field and not a string value and still the user.username will be shown in the cell?

Answer 1

Finally I found an workaround to get 'select' working with key and 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
  }
},

The idea is that inside select params we will give only strings and we will try to find the id of object based on the name. Important is that we agreed that name is unique field.

After managing to get it working, I realized that indeed the select is a very poor solution. Is not working properly and I would not advice to use it.

@Yonatan Lilling For any question, please let me know.

Answer 2

I found a solution for javascript in https://www.ag-grid.com/javascript-grid-reference-data/?framework=angular#gsc.tab=0

i create my array:

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

and in my columnDefs:

{
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);
            }

}

and for the three function :

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;
            }
        }
    }
}

I hope this can be useful ;)