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. 

Here is the stackBlitz to demonstrate the behavior...

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

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.

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

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