Hi Paul,
The undesired behavior demonstrated in the following example:
https://stackblitz.com/edit/angular-h1aaz2-tm4du2?file=app/map-selector.component.html
is caused due to having two elements rendered in the DOM with a kendoDialogContainer directive. In such cases, the Dialog service will take the last such element within the DOM and use it to render the Dialog within it. Upon clicking the "Open Street Map" link located within the first PanelBar item, the Dialog is actually rendered within the element used to represent the second PanelBar item. Inspecting the DOM, we can see that the second PanelBar item does contain the Dialog markup, but it is wrapped in a container with "display: none" CSS as long as the second PanelBar item isn't expanded.
In order to avoid any future confusion that may arise, we will update our documentation to state that if there are multiple elements with the kendoDialogContainer directive added to the markup, then the Dialog will use the last one for its content.
The update will be included in the following article:
https://www.telerik.com/kendo-angular-ui/components/dialogs/dialog/service/#toc-specifying-the-dialog-container
Indeed, that you for the provided feedback. Please let me know in case there is something unclear or I can provide any further information on this case.
Regards,
Svetlin
Progress Telerik
Get
quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers.
Learn More.