Window opened from within panel bar

[Paul]

I have a screen using a Kendo Panel Bar to get the accordion effect.

Within 2 of the panels there is a component with a link in it that is used to open a Kendo Window to display extra data for the panel. First of all, the window actually belongs to the panel bar not the browser. When I collapse the panel, the window goes away. It does re-appear when expanding the panel though so I thought that was not a problem. However, since adding the component to the last panel bar, even when I click on the component's button from the first panel, the window does not show until I expand the last panel telling me that somehow it thinks it belongs to the wrong panel. Any assistance would be appreciated. I can try to get an example if needed. 

[Paul]

Here is the stackBlitz to demonstrate the behavior...

https://stackblitz.com/edit/angular-h1aaz2

[Paul]

https://stackblitz.com/edit/angular-h1aaz2

[Paul]

I got this working by moving the window container div to the parent component instead...Not sure this is the desired behavior though.

<div kendoWindowContainer></div>

[Paul]

I thought it was working as the window now belongs to the parent component however I am no getting intermittent errors from the panel bar component stating "Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'k-state-focused: true'. Current value: 'k-state-focused: false'."

Not sure what is causing it but any help would be appreciated. Was not getting this in posted Stackblitz above as it is not retrieving any data or doing anything. The only thing I noticed was when setting data on the window component, when the query returned the data faster, was when I see the error.

[Paul]

Adding screenshot of error.

[Svet]

Hi Paul,

Thank you for the provided example and details.

To begin with, the <div kendoWindowContainer></div> tag specifies where the content of the Widnow will be rendered. It can be placed within a kendoPanelBarContent template or at the root of the DOM. 

The demonstrated error is a generic Angular error, thrown only in dev mode, that ensures old data is not demonstrated to the user. Please check some of the online available articles on this topic that provide details and troubleshooting suggestions:

https://indepth.dev/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error/

https://medium.com/better-programming/expressionchangedafterithasbeencheckederror-in-angular-what-why-and-how-to-fix-it-c6bdc0b22787

The error further hints that it is caused by changing the focus of the PanelBar inconsistently.

I further tried to reproduce the error in the following updated example:

https://stackblitz.com/edit/angular-h1aaz2-6pthbr?file=app/app.component.ts

where I simulate receiving of remote data, within a setTimeout in map.component.ts, used for the content of the Window, but I am unable to get the error. If further assistance is required for this case, could you update the provided example, or send a runnable project reproducing the issue. Thank you in advance.

Regards,
Svetlin
Progress Telerik

[Paul]

Thanks for the response. The reason for the original post was to alert of the problem where I did have the <div kendoWindowContainer></div> tag within a component that was a part of the panel bar content. However when opening the window, it gets attached to the last panel instead of the one that contained the calling component.

 

Paul

[Svet]

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