Можно ли получить значения из cellEditorParams, чтобы раскрасить ячейки столбца в ag-grid?

Question

Я пытаюсь раскрасить всю ячейку на основе значения, выбранного пользователем из раскрывающегося меню внутри ячейки.
Это определение столбца, в котором я определил меню dropDown с помощью cellEditorParams и раскрасил ячейку с помощью cellStyle.

{
  headerName: 'Year',
  field: 'year',
  width: 500,
  editable: true,
  cellEditor: 'agSelectCellEditor',
  cellEditorParams: {
    values: [
      '',
      '1 - Faible',
      '2 - Moyen ',
      '3 - Significatif',
      '4 - Elevé'
    ]
  },
  cellStyle(params) {
    const color = 'blue';
    return {
      'background-color': color
    };
  }
}

Что дает мне это:

Я хотел бы раскраситьячейка на основе значения, выбранного пользователем.
т.е.: если он выберет: «1 - Faible», цвет ячейки станет: зеленый
Если он выберет: «2 - Moyen», цветячейка станет: оранжевая

И т. д. и т. п.
Так вот, где мне нужна ваша помощь:
1 / Как я могу получить значение, выбранное пользователем?
2/ Как я могу использовать его в cellStyle?
3 / Я даже делаю это правильно?

Answer 1

Я только что нашел нужное решение с минимальным кодом и без определения cellRenderer:

 {
  headerName: 'Name',
  field: 'name',
  width: 300,
  editable: true,
  cellEditor: 'agSelectCellEditor',
  cellEditorParams: {
    values: [
      'Bob',
      'Harry',
      'Sally',
      'Mary',
      'John',
      'Jack',
      'Sue',
      'Sean',
      'Niall',
      'Albert',
      'Fred',
      'Jenny',
      'Larry'
    ]
  },
cellStyle(params) {
var color;
if (params.value=== 'Harry') {color='yellow'}
else
if (params.value=== 'Bob') {color='green'}
else
if (params.value=== 'Mary') {color='red'}
return {
    'background-color': color
}},

}
Это прекрасно работает, если вы выберете Гарри, весь цвет ячейки станет желтым:)

Answer 2

Рабочий образец

Существует встроенная опция в ag-grid, которая называется cellClassRules.

 this.columnDefs = [
      {
        headerName: "Name",
        field: "name",
        width: 300,
        editable: true,
        cellEditor: "agRichSelectCellEditor",
        cellEditorParams: {
          values: [
            "Bob",
            "Harry",
            "Sally",
            "Mary",
            "John",
            "Jack",
            "Sue",
            "Sean",
            "Niall",
            "Albert",
            "Fred",
            "Jenny",
            "Larry"
          ]
        },
        cellClassRules: {
           // apply green to Bob
           'rag-green-outer': function(params) { return params.value === "Bob"},
           // apply amber Harry
           'rag-amber-outer': function(params) { return params.value === "Harry"},
           // apply red to Mary
           'rag-red-outer': function(params) { return params.value === "Mary"}
       },
      }
]

style.css

.rag-green-outer {
  background-color: green;
}

.rag-amber-outer {
  background-color: yellow;
}

.rag-red-outer{ 
  background-color: red;
}

Вы также можете попробовать cellValueChanged событие. Это еще один подход.