ag-grid的agSelectCellEditor无法正确渲染单元格

Question

我正在使用agSelectCellEditor在特定列单元格中添加一个下拉菜单。 这是列定义：

target

这是ag-grid渲染的方式：

我必须双击它，以使下拉列表以这种方式显示：

然后我可以选择任何可用选项。
如您所见，这确实是较差的渲染，并且可能导致用户感到困惑并且无法使用我正在构建的工具。

所以我的问题是：

有什么方法可以使ag-grid从beginnig中显示下拉菜单，而无需双击单元格，以便用户实际上知道该怎么做？
谢谢！

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

希望这会有所帮助。