RenderHTML With Element ID Destroys all DOM Elements

[grbspltt]

I am using "stimulsoft-reports-js": "~2024.3.5"

Attempting to load my report designer into a react application.

The moment designer.renderHtml("report-designer-content") is invoked, all the body tag child dom elements are deleted and replaced with the designer.

Dom Before:

DOM Before.png (66.75 KiB) Viewed 2241 times

DOM After:

DOM After.png (16.06 KiB) Viewed 2241 times

This was functioning fine on version 2023.2.2

[grbspltt]

Of course hours of banging my head against the wall lead me to create this post, then about 5 minutes later I get it to work.

I created a ref, added it to the DOM element where I want the designer to render, then used it in the renderHtml.

const designerElementRef = React.useRef(null);
designer.renderHtml(designerElementRef.current!)

<div ref={designerElementRef}></div>

[Lech Kulikowski]

Hello,

Thank you for sharing your experience with other users.

[grbspltt]

While I'm happy to help, it still doesn't explain why passing the ID to renderHtml blows away the entire DOM. Luckily I stumbled upon the API that allows you to pass the DOM element by reading the type in the d.ts file.

[Lech Kulikowski]

Hello,

It doesn't delete anything in the body, all elements remain if the contentID, which is passed as a parameter to renderHTML(), is used to find a container to create the designer. You probably have an incorrect ID, the element is not found and then the designer is created for the whole page, completely rebuilding the DOM anew.

Thank you.

[grbspltt]

Thanks for the info on behavior. I am definitely using the same ID as it is a constant being referenced in both the DOM ID and JS code. It must be due to React triggering a re-render when stimulsoft is trying to render the HTML, and since its mid-rerender, renderHTML can't find the DOM node so it replaces the contents in the body. Which makes sense why using a Ref fixed this.

[Lech Kulikowski]

Hello,

Please send us a sample project that reproduces the issue for analysis.

Thank you.