ag-Raster cellEditor mit Objekt auswählen Werte

Question

ich aus einer Liste der Benutzer auswählen möchten:

user.ts

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

die Spaltendefinition sieht wie folgt aus:

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

Ich möchte einen Benutzer aus der Liste auswählen und in cellValueChanged das Objekt abrufen können.

Gibt es eine Option, dass das user das Feld und kein String-Wert ist und immer noch die user.username in der Zelle angezeigt wird?

Answer 1

Endlich habe ich einen Workaround gefunden, um 'select' arbeiten mit key und value zu bekommen.

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

Die Idee ist, dass innerhalb select params wir nur Strings geben und wir werden versuchen, die id von Objekt zu finden, basierend auf den name. Wichtig ist, dass wir uns darauf geeinigt haben, dass name ein eindeutiges Feld ist.

Nach der Verwaltung, es funktioniert, erkannte ich, dass die select in der Tat eine sehr schlechte Lösung ist. Funktioniert nicht richtig und ich würde nicht empfehlen, es zu benutzen.

@Yonatan Lilling Für jede Frage, lass es mich wissen.

Answer 2

fand ich eine Lösung für Sie Javascript in https://www.ag-grid.com/javascript-grid-reference-data/?framework=angular#gsc.tab=0

Ich eröffne mein Array:

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

und in meinem 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); 
      } 

} 

und für die drei Funktion:

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

Ich hoffe, das kann nützlich sein;)