Ag-grid Cell containing menu button

问题

I am using community version of ag-grid in my project. I am trying add menu button in one of the cell of every row. on clicking of the menu button, there should be menu pop up, which will have Edit/delete/rename options and I need to fire event with row value when any item on menu is clicked.

I am trying to create a cell renderer which will display the button. menu will be hidden initially and on clicking of button, I am changing display using css class. I am seeing the css class is getting added correctly but the menu is still not visible. I checked in the console and it is hidden behind the table. I used position absolute and z-index at various place but ended up with no luck.

I can not use context menu or enterprise menu out of box as I am using community version. can you please help me here? also, is there any better way to achieve this result then let me know. Thanks a lot in advance.

var students = [
    {value: 14, type: 'age'},
    {value: 'female', type: 'gender'},
    {value: "Happy", type: 'mood'},
    {value: 21, type: 'age'},
    {value: 'male', type: 'gender'},
    {value: "Sad", type: 'mood'}
];


var columnDefs = [
    {
        headerName: "Value",
        field: "value",
        width: 100
    },

    {headerName: "Type", field: "type", width: 100},
     {headerName: "Action", width: 100, cellRenderer: 'actionMenuRenderer' }
];

var gridOptions = {
    columnDefs: columnDefs,
    rowData: students,
    onGridReady: function (params) {
        params.api.sizeColumnsToFit();
    },
    components:{
      actionMenuRenderer: ActionMenuCellRenderer
    }
};
function ActionMenuCellRenderer() {
}

ActionMenuCellRenderer.prototype.init = function (params) {
    this.eGui = document.createElement('div')

    if (params.value !== "" || params.value !== undefined || params.value !== null) {
         this.eGui.classList.add('menu');
         this.eGui.innerHTML = this.getMenuMarkup();
         this.actionBtn =  this.eGui.querySelector(`.actionButton`);
           this.menuWrapper =  this.eGui.querySelector(`.menuWrapper`);
           this.actionBtn.addEventListener('click', event => this.onActionBtnClick(event));
    }
};

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

ActionMenuCellRenderer.prototype.onActionBtnClick = function() {
    alert('hey');
    this.menuWrapper.classList.toggle('showMenu');
}

ActionMenuCellRenderer.prototype.getMenuMarkup = function () {
        return `
            <button type="button" class="actionButton">
              menu
            </button>
            <div class="menuWrapper">
                <a class="menuItem">
                    Edit
                </a>
                <a class="menuItem">
                    Delete
                </a>
                <a class="menuItem">
                    Duplicate
                </a>
            </div>
        `;
}

My plnkr sample- plnkr sample

来源：https://stackoverflow.com/questions/59724808/ag-grid-cell-containing-menu-button

标签

javascript

ag-grid