[SOLVED] Create aggrid cell editor in specific path in dom

Create aggrid cell editor in specific path in dom

I am using Angular 16 and AgGrid 30.

I want the cell editor to be created on different path, currently it's created in body at bottom div element with these classes: ag-theme-material ag-popup, and inside is the editor, but I want it to be somewhere else, for example body > div.cdk-overlay-container.

Can't find that in documentation, any help is appreciated.

<body>
  <div class="cdk-overlay-container"></div>
  <div class="ag-theme-material ag-popup"></div>
</body>

Thanks

edit: i have managed to move the ag-pupup to cdk-overlay-container like this, in 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);
    }
  }

but when i click away and want close the cell editor, i got:

Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

this happens because api knows the old path, but now the new. any api direction for this is appreciated.

Solution

the solution really exist, from aggrid:

popupParent

Type HTMLElement | null DOM element to use as the popup parent for grid popups (context menu, column menu etc).