Completed
Last Updated: 29 Jul 2020 10:52 by ADMIN
Bjorn
Created on: 12 Nov 2019 09:42
Type: Feature Request
1
Is it possible to define where the dropdown containers are appended in the DOM when using KendoReact?

Hi, 

Is it possible to define where the dropdown container (i.e. k-list-container) is appended in the DOM?

By default it is appended at the bottom of the body but I'd like to define where it is appended.

The reason why I need to do this is because I'm using the KendoReact components in a WebComponent (custom element) which is hosted in a shadow-dom for isolation.
The styles are also only loaded within the shadow-dom and are therfore not applied to content on the outside. 

The issue is that the kendo dropdown container is appended outside of the shadow-dom and the scope of the kendo styles.
The dropdownlist component is styled correctly but the dropdown part that is appended to body is not styled.

I've solved this with other components (i.e. modal window) by defining where I want the the container appended with the createPortal method in React.

ReactDOM.createPortal(
        <React.Fragment>
          <ModalOverlay />
          <ModalWrapper
            aria-modal
            aria-hidden
            tabIndex={-1}
            role="dialog"
            data-testid="modal-wrapper"
          >
            <ModalMain>
              <ModalContent>
                <ModalHeader>
                  <ModalHeaderTitle>{title}</ModalHeaderTitle>
                </ModalHeader>
                <ModalBody>{content}</ModalBody>
              </ModalContent>
            </ModalMain>
          </ModalWrapper>
        </React.Fragment>,
        document.getElementsByTagName('custom-element').length > 0
          ? document.getElementsByTagName('custom-element')[0].shadowRoot

          : document.body

)

 

6 comments
ADMIN
Stefan
Posted on: 29 Jul 2020 10:52

Hello,

The appentTo option is already added: 

https://www.telerik.com/kendo-react-ui/components/dropdowns/api/DropDownsPopupSettings/#toc-appendto

Regards,
Stefan
Progress Telerik

ADMIN
Stefan
Posted on: 06 Apr 2020 10:24

Hello, Andrey,

I have provided an answer to the issue connected with the font icons and shadow dom:

https://feedback.telerik.com/kendo-react-ui/1460445-how-to-enable-webcomponentfont-icons-work-from-inside-of-shadow-dom

As for the main request, I will pass this to the team to raise its priority, but please have in mind that most of the tasks for the next release is already set.

Regards,
Stefan
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Andrey
Posted on: 03 Apr 2020 12:40

Hi all,

I have exact same issue and this prevents our company to choose Kendo React library as a base for our next big project. We going to use webcomponents + react.

I've also find that WebComponentIcons font characters are not diplayed properly inside shadow dom.

@Stefan, Can you assist?

When I connect all.css styles for whole html page all works fine but if I do same behind shadow-root element then all icons look broken:

ADMIN
Stefan
Posted on: 15 Nov 2019 13:45

Hello, Bjorn,

I converted it to a public feature request item, this is the link:

https://feedback.telerik.com/kendo-react-ui/1441762-is-it-possible-to-define-where-the-dropdown-containers-are-appended-in-the-dom-when-using-kendoreact

As for an ETA, this will greatly depend on community demand. There are different tags that will be updated when the item is planned and then when the development has started.

Also, after discussing it with the developers' team, one of the main reasons this is still not supported is that it can easily break the component by setting incorrect anchor.

Regards,
Stefan
Progress Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Bjorn
Posted on: 15 Nov 2019 11:54

Hi Stefan,

Yes, It would be great if you can convert this to a feature request.

When can we roughly expect this to be publically available feature then?

 

ADMIN
Stefan
Posted on: 13 Nov 2019 06:16

Hello, Bjorn,

Currently, I can suggest converting this item to a feature request.

The DropDownList has a popupSettings property, but it only provides access to some of the Popup options:

https://www.telerik.com/kendo-react-ui/components/dropdowns/api/DropDownListProps/#toc-popupsettings

We can extend the PopupSetting to accept the appendTo options of the Popup to control where it will be rendered:

https://www.telerik.com/kendo-react-ui/components/popup/api/PopupProps/#toc-appendto

If you agree to that, I will convert this to a public feature request item.

Regards,
Stefan
Progress Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items