asked on June 28, 2024
Hi,
Would like to ask how to create a new Flexmonster component in a Web Component residing in the shadowDOM.
Currently setting the id as according to the documentation causes the error 'Flexmonster: Unable to create the component. DOM element with id [container id] is not found.' However, console logging this.shadowRoot?.getElementById(container id) shows the element exists.
Thank you.
⋅ July 1, 2024
Hello!
Thank you for reaching out to us.
Kindly note that it is possible to create a Flexmonster instance using shadowDOM by passing the container queried from shadowDOM to Flexmonster as follows:
const pivotContainer = shadowRoot.getElementById('pivot-container');
let pivot = new Flexmonster({
container: pivotContainer,
//other properties
});
We have prepared a JSFiddle example for reference: https://jsfiddle.net/flexmonster/tdjhqe4p/.
Kind regards,
Solomiia
⋅ July 10, 2024
Hello!
Hope you are having a great week.
Our team is wondering if you had some time to check our example with creating Flexmonster instance in ShadowDOM. Could you please let us know if the suggested approach works well for your case?
Looking forward to hearing from you.
Kind regards,
Solomiia
⋅ July 17, 2024
Hello!
Hope you are doing well.
Just checking in to ask if our example with creating Flexmonster instance in ShadowDOM was helpful.
Looking forward to hearing your feedback.
Kind regards,
Solomiia
⋅ August 8, 2024
Hi Solomiia,
Thanks this works.
However, when I try the print function (ie. Print) in the jsfiddle, Flexmonster get stuck on the "Please wait" dialog box.
On my end, in my local environment, when I try to print a pivot table that is in the shadowDOM, I get an error: TypeError: Cannot read properties of undefined (reading 'document')
Attached is the error.
Thanks!
⋅ August 8, 2024
Hello!
Thank you for getting back to us.
Kindly note that the following behavior occurs because of the specifics of using ShadowDOM, where the access to the main document object should be configured using shadowRoot instead of the standard document. Our Dev team will research possible improvements for using Flexmonster component in the ShadowDOM. We will get back to you with the research results with the ETA September 2nd.
As a temporary workaround for printing, we suggest using a built-in browser print.
Our team will notify you about any updates on the matter.
Feel free to reach out to us in case of any other questions.
Kind regards,
Solomiia
⋅ 5 days ago
Hello!
Hope you are doing well.
Our team is happy to inform you that the issue with printing the report when the component is located in ShadowDOM was fixed.
The fix is included in the 2.9.85 version of Flexmonster: https://www.flexmonster.com/release-notes/version-2-9-85/.
You are welcome to update the component: https://www.flexmonster.com/doc/updating-to-the-latest-version/.
Please let us know if the fix works well for you.
Kind regards,
Solomiia
