asked on March 28, 2021
Dear,
I want to use window.open() api and ReactDOM.createPortal() api to pass the Flexmonster component to the created new window,however,it will prompt TypeError: f.container.substr is not a function and TypeError: Cannot read property 'dispose' of undefined.
Here is my scenario:
1.There is a existing flexmonster pivot table.
2.Select some cells in the pivot table and right-click to open a new flexmonster instance in a new window,in my case I was using window.open() api and ReactDOM.createPortal() api to do this,but failed.
Since my project is a react-based project and it seems the ReactDOM.createPortal() is the much appropriate api to achieve such goal.
So,is there a better way to open another Flexmonster instance and show the selected cells data on it?Or can I solve that two error when using ReactDOM.createPortal() api,thanks!
The demo code and errors.png are attached for your reference.
⋅ March 30, 2021
Hello,
Thank you for reaching out to us.
You are right, it seems using ReactDOM.createPortal() is the suggested approach when it comes to rendering React components in a new window.
We have prepared a simple React project for illustration purposes (please see "pivot-react.zip" in the attachments).
In the example, a new "Open in new pivot" option is added to Flexmonster's context menu for opening a new Flexmonster instance in a new window.
Please note that this example only illustrates the general idea of how Flexmonster could be rendered in a new window in React.
To start the sample project, please run the following commands:
npm i
npm start
Hope this helps!
Please feel free to reach out if other questions arise.
Kind regards,
Vera
⋅ April 12, 2021
Hello,
Thanks for the assistant and we'll try your suggestion!
