This is a migrated thread and some comments may be shown as answers.

PopupAppendTo props in Kendo UI Components

1 Answer 36 Views
This is a migrated thread and some comments may be shown as answers.
Max
Top achievements
Rank 1
Max asked on 15 Aug 2019, 09:15 AM

Hi, I have used Kendo UI for Vue for quite some time now. I noticed that Kendo Dropdownlist components have the PopupAppendTo props to bind the dropdown to the element in template, while majority of the other components do not have and ending up appended to the body-tag (outside of <div id='app'>).

I'm quite surprised to see this because Vue.js only has control over the <div id='app'> element and Vue.js recommends against using body-tag. Why don't other components have this props as well so that Vue.js has full control over the Kendo UI components?

1 Answer, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 19 Aug 2019, 09:01 AM
Hello Max,

The reason for the popups of the Kendo widgets to be appended to the body is to ensure correct positioning. If a popup is appended, for example, to a wrapper element generated for our widgets, it is possible to result in improper placement of the popup. The popup.appendTo configuration is given to the users so that they could make sure that a widget's popup will be positioned correctly. In the popup.appendTo example, you can see how the DropDownList's popup is appended to the div element containing the widget. Upon opening the dropdown, the popup is positioned slightly to the left.

Our Vue.js components are client-side wrappers for the jQuery widgets. The logic that generates and displays popups comes from the specific widget itself and not from the wrapper (Vue). That is the reason why we append popups to the body tag despite the good practices for VueJS. 

Regards,
Martin
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
Asked by
Max
Top achievements
Rank 1
Answers by
Martin
Telerik team
Share this question
or