React grid vz. shadow DOM

[Vladislav]

Hello.

I have a question. I know, Kendo does not officially support shadow DOM. After all. We were forced to use react grid in the shadow DOM. We have a problem that all pop up windows (paging settings, filter opening) are displayed incorrectly. Without styles and without the possibility to serve the event. Do you have a tip on how to treat it?

Thank you.

Vlado

[Yanko]

Hello, Vlado,

Thank you for reaching out.

If this only occurs with Dialogs and Popups a possible cause for the unexpected behaviour can be that by default they are rendered outside of the root element. You can read more about how to specifically set where to append the popups from this article in our documentation:

• https://www.telerik.com/kendo-react-ui/components/popup/global-context/ 

If this does not help you with the incorrectly displayed popups, I suggest opening a new support ticket where we will need additional details about the described scenario. Could you please share either of the following?:

1. Isolated React application (zip the app after deleting the node_modules folder)
2. StackBlitz example replicating the issue (you can use the example in this page and customize it)
3. More screenshots and screen recordings and/or any additional details relevant to the issue
4. Once we have the above information, we can investigate the error and help you resolve it.

Looking forward to hearing from you.

Regards,
Yanko
Progress Telerik

[Vladislav]

Hello Yanko!

Thank you for your reply.
Your solution works great on version 8.
But we also need to improve the implementation in version 5. Popup provider correctly creates an html element with the class "k-animation-container" in the shadow root wrapper, but only for the filter in the table head. Setting the pagination in the footer will still create an element for the Popup in the parent in the body element.
Could you help me with that?

Edit

 

Edit:

I tried many ways to solve it. I found that if I wrap the entire code with an iframe, the pop-up windows are created in the right place.
However, one problem that I found out now is that when I click on the filter/set the number of records, there are still html divs in the DOM with className: "k-animation-container" ...

 

Thank you.

[Yanko]

Hi, Vlado,

Thank you for the additional information provided.

I tried to reproduce the described scenario but it was really challenging without a code snippet or a runnable example. I prepared a demo where the Grid is wrapped in `PopupPropsContext` and the Popup, for the number of records per page, seems to appear inside the root element:

• https://stackblitz.com/edit/react-chtjc7?file=app%2Fapp.jsx 

I will appreciate modifying the example to replicate the faced scenario or any information related to the topic. 

I await your answer to continue further resolving the matter.  

 

[Vladislav]

Hi Yanko!

Thank you for your effort. My problem is more complex.
Similar to you, I tested the behavior in StackBlitz:
https://stackblitz.com/edit/react-d5odkv?file=app%2Fapp.tsx

It worked :). But in this case, the code is wrapped in an iframe, so it works without any issues.

Locally, I'm dealing with a more complex problem. In an MVC application, I'm creating a shadow DOM. Then, the external React application code is executed.

It looks something like this.

I have a jQuery function where I call the following code:

var shadow = document.getElementById("shadow_wrapper").attachShadow({ mode: 'open' });

var script = document.createElement('script');
script.src = `/Scripts/react/children.js`; 
script.async = false;
script.type = "module"; 
script.onload = () => {
    console.log('Script [children] loaded successfully');
    setTimeout(() => {
        var el = shadow.getElementById('_children_');
        window.initObjectIsDetailChildren(el);
    }, 500);
};
shadow.appendChild(script);

 

When this script (/Scripts/react/children.js) is loaded, the React code in the library runs. For simplicity, I have something like this there:

(entry point in react / appChildren.tsx)

const initObjectIsDetailChildren = (htmlObject: Element) => {

      if (htmlObject) {

         const root = createRoot(htmlObject);

        root.render(<ChildrenMVCContainer />);

}};

In ChildrenMVCContainer, the grid is generated, but it's wrapped in a Popup provider. Some popups are generated in the correct place, while others are not.

 

But I don't know, in version 8 it works as it should. I'm also using iframe locally for now and plan to upgrade to version 8 soon.

 

Thank you.

 

[Yanko]

Hi, Vlado,

Thank you for sharing the workaround with the iframe.

If I understand correctly the iframe fixes the problem and version 8 also does fix the issue. If I am correct, I will suggest upgrading to our latest version since the Popups appear correctly there. Furthermore, you can utilize our new features and favor from all the big fixes which could save you a lot of time and effort in the future.

If any further complications appear with the newest version, do not hesitate to contact us again.