I am currently working with Angular 16 and AgGrid 30.
My goal is to have the cell editor created in a different location than its default position, which is within a div element at the bottom of the body with these classes: ag-theme-material ag-popup. I would prefer it to be placed elsewhere, for example within
body > div.cdk-overlay-containerI have not been able to find guidance on this in the documentation, so any assistance would be greatly appreciated.
<body>
<div class="cdk-overlay-container"></div>
<div class="ag-theme-material ag-popup"></div>
</body>Thank you
edit: I was able to move the ag-pupup to cdk-overlay-container by implementing the following in my custom cell editor component:
public afterGuiAttached(): void {
const parent = document.querySelector(".cdk-overlay-container");
const agPopup = document.querySelector(".ag-popup");
if (parent && agPopup) {
parent.appendChild(agPopup);
}
}However, when attempting to close the cell editor by clicking away, I encountered the following error:
Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
This issue arises because the API still references the old path instead of the new one. Any guidance from the API regarding this matter would be greatly appreciated.