[英]Ag-grid Cell containing menu button
I am using community version of ag-grid in my project.我在我的项目中使用社区版的 ag-grid。 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.
菜单最初将被隐藏,单击按钮时,我正在使用 css 类更改显示。 I am seeing the css class is getting added correctly but the menu is still not visible.
我看到 css 类被正确添加,但菜单仍然不可见。 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.
我在不同的地方使用了绝对位置和 z-index,但最终没有运气。
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我的 plnkr 样本 - plnkr 样本
The issue is due to the context menu also renders inside the ag-grid cell.问题是由于上下文菜单也呈现在 ag-grid 单元格内。 So it does not matter how much z-index you give it can not display it outside the cell renderer div of the ag grid.
所以无论你给它多少z-index都不能在ag网格的单元格渲染器div之外显示它。 The solution is we can use the library like Tippys which will render the menu outside the ag-grid main div which will fix the issue.
解决方案是我们可以使用像 Tippys 这样的库,它将在 ag-grid 主 div 之外呈现菜单,这将解决问题。 Below is the sample code for react to show the menu on click of a button in ag-grid cell renderer.
以下是在 ag-grid 单元格渲染器中单击按钮时显示菜单的示例代码。
There was nice blog by the ag-grid on the same.同样的 ag-grid 也有不错的博客。 Here is the reference link
这是参考链接
import React, { useState, useEffect, useMemo, useRef } from "react";
import { AgGridReact } from "ag-grid-react";
import Tippy from "@tippyjs/react";
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-alpine.css";
function ActionsMenu(props) {
const tippyRef = useRef();
const [visible, setVisible] = useState(false);
const show = () => setVisible(true);
const hide = () => setVisible(false);
const menu = (
<div className="menu-container">
<div className="menu-item" onClick={hide}>
Create
</div>
<div className="menu-item" onClick={hide}>
Edit
</div>
<div className="menu-item" onClick={hide}>
Delete
</div>
</div>
);
return (
<Tippy
ref={tippyRef}
content={menu}
visible={visible}
onClickOutside={hide}
allowHTML={true}
arrow={false}
appendTo={document.body}
interactive={true}
placement="right"
// moveTransition='transform 0.1s ease-out'
>
<button onClick={visible ? hide : show}>Actions</button>
</Tippy>
);
}
const frameworkComponents = {
ActionsMenu: ActionsMenu,
};
export default function App() {
const [rowData, setRowData] = useState([
{ make: "Ford", model: "Focus", price: 20000 },
{ make: "Toyota", model: "Celica", price: 40000 },
{ make: "BMW", model: "4 Series", price: 50000 },
]);
const [columnDefs, setColumnDefs] = useState([
{ field: "make" },
{ field: "model" },
{ field: "price" },
{ field: "", cellRenderer: "ActionsMenu" },
]);
const defaultColDef = useMemo(
() => ({
sortable: true,
filter: true,
}),
[]
);
useEffect(() => {
fetch("https://www.ag-grid.com/example-assets/row-data.json")
.then((result) => result.json())
.then((r) => setRowData(r));
}, []);
return (
<div className="ag-theme-alpine" style={{ height: 500, width: "100%" }}>
<AgGridReact
rowData={rowData}
columnDefs={columnDefs}
defaultColDef={defaultColDef}
frameworkComponents={frameworkComponents}
/>
</div>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.