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

时间:2019-04-30 14:59:12

标签: ag-grid ag-grid-ng2

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

target

这是ag-grid渲染的方式:
enter image description here
我必须双击它,以使下拉列表以这种方式显示:
enter image description here
然后我可以选择任何可用选项。
如您所见,这确实是较差的渲染,并且可能导致用户感到困惑并且无法使用我正在构建的工具。

所以我的问题是:

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

PS:我不想使用自定义单元格渲染器,因为单元格中的选项取决于其他变量,如果我选择使用customcellRenderer来实现下拉列表,整个事情可能会变得一团糟。不会引起我上述任何麻烦的其他专栏)

1 个答案:

答案 0 :(得分:1)

这是我遇到的同样问题:)。 默认情况下,AgGrid不显示下拉列。如果您希望将其显示为下拉列表,则必须使用cellRenderer来显示图像以通知用户这是下拉列。

可以将双击编辑更改为单击,或者单击无编辑表示该选项可用。 设置columndef选项singleClickEdit : true,

DropDown Column

enter image description here

 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

希望这会有所帮助。