agSelectCellEditor от ag-grid неправильно отображает ячейку

Question

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

{
      headerName: "Rattachement",
      field: "rattachement",
      editable: true,
      headerTooltip:
        "Choisissez l'entité de rattachement parmi les choix présents dans la liste déroulante",
      cellEditor: "agSelectCellEditor",
      cellEditorParams: {
        values: [
          "",
          "Audit",
          "RA",
          "Consulting",
          "FA",
          "Tax&Legal",
          "ICS",
          "Taj"
        ]
      }
    }

Вот как это делает ag-grid:

Я должен дважды щелкнуть по нему, чтобы раскрывающийся список отображался следующим образом:

И тогда я могу выбрать любой из доступных вариантов.
Как вы заметили, это действительно плохой рендеринг и может привести пользователя в замешательство и неспособности использовать инструмент, который я создаю.

Итак, мой вопрос:

Есть ли способ заставить ag-grid отображать выпадающее меню с самого начала без необходимости дважды щелкать по ячейке, чтобы пользователь действительно знал, что делать?
Спасибо!

PS: я не хочу использовать настраиваемое средство визуализации ячейки, потому что параметры в ячейке зависят от других переменных, и все может стать беспорядочным, если я решу реализовать раскрывающийся список с помощью customcellRenderer (который я сделал с другие колонки, где это не вызывает у меня ни одной из упомянутых проблем)

Answer 1

Это та же проблема, с которой я столкнулся :).По умолчанию AgGrid не показывает выпадающие столбцы.Если вы хотите показать его как раскрывающийся список, вы должны будете использовать cellRenderer, чтобы показать изображение, чтобы уведомить пользователя, что это выпадающий столбец.

Редактирование двойного щелчка может быть изменено на одиночный щелчок или редактирование без щелчка, эта опция доступна.Задайте опцию columndef singleClickEdit : true,

 var columnDefs = [
        {field: 'name', width: 100},
        {
            field: 'gender',
            width: 90,
            cellRenderer: 'genderCellRenderer',
            cellEditor: 'agRichSelectCellEditor',
            singleClickEdit : true,
            cellEditorParams: {
                values: ['Male', 'Female'],
            }
        },]

var gridOptions = {
    components: {
        'genderCellRenderer': GenderCellRenderer
    },
    columnDefs: columnDefs,
}

    function GenderCellRenderer() {
    }

    GenderCellRenderer.prototype.init = function (params) {
        this.eGui = document.createElement('span');
        this.eGui.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 18 18"><path d="M5 8l4 4 4-4z"/></svg>' + params.value;
    };

    GenderCellRenderer.prototype.getGui = function () {
        return this.eGui;
    };

DEMO

Надеюсь, это поможет.