Display the Grid Column Chooser over a dialog

[Volodymyr]

Hello,

How to open the Column Chooser Dialog above ejs-dialog(without target value) using an external button which is inside ejs-dialog.

I'm using this: 

this.grid?.columnChooserModule.openColumnChooser(100, 40);

but Column Chooser appeared under the dialog.

Could you please help me to manage it?

[Johnson Soundararajan S]

Hi Volodymyr,

Greetings from Syncfusion support.

Upon reviewing your query, it appears that you are attempting to display the Grid column chooser dialog by clicking an external button within a Syncfusion dialog. We have created a sample that demonstrates a similar scenario, where a button within a Syncfusion dialog component triggers the opening of the Grid column chooser The column chooser dialog now displays correctly over the Syncfusion dialog. You can refer to the provided sample and the screenshot for further clarification.

Sample: https://stackblitz.com/edit/angular-jx5rvm-jzuvzz?file=src%2Fapp.component.html,src%2Fapp.component.ts

Screenshot:

If you need any further assistance or have additional questions, please feel free to let us know.

Regards,

Johnson Soundararajan S

[Volodymyr]

Hello,

Thanks for your fast response. 

I forgot to mention that I'm using grid inside dashboard layout.

Sample:

https://stackblitz.com/edit/angular-jx5rvm-gewgmp?file=src%2Fapp.component.html

Br Volodymyr

[Johnson Soundararajan S]

Hi Volodymyr,

By default, the column chooser is rendered within the grid element itself. Since the Grid is positioned behind the Dialog, the Column Chooser will also inherit the same positioning.  The only potential solution to overcome this obstacle would be to render the Column Chooser directly within the document body. However, providing this as a workaround is not feasible because it would impact event handlers for the Column Chooser.

Please get back to us, if you need further assistance.
 

Regards,

Johnson Soundararajan S