Window opened from within panel bar

9 posts, 1 answers
  1. Paul
    Paul avatar
    22 posts
    Member since:
    Feb 2015

    Posted 30 Oct 2019 Link to this post

    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. 

  2. Paul
    Paul avatar
    22 posts
    Member since:
    Feb 2015

    Posted 31 Oct 2019 in reply to Paul Link to this post

    Here is the stackBlitz to demonstrate the behavior...

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

  3. Paul
    Paul avatar
    22 posts
    Member since:
    Feb 2015
  4. Paul
    Paul avatar
    22 posts
    Member since:
    Feb 2015

    Posted 31 Oct 2019 Link to this post

    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>
  5. Paul
    Paul avatar
    22 posts
    Member since:
    Feb 2015

    Posted 31 Oct 2019 in reply to Paul Link to this post

    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.

  6. Paul
    Paul avatar
    22 posts
    Member since:
    Feb 2015

    Posted 31 Oct 2019 in reply to Paul Link to this post

    Adding screenshot of error.
  7. Svetlin
    Admin
    Svetlin avatar
    413 posts

    Posted 01 Nov 2019 Link to this post

    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

    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.
  8. Paul
    Paul avatar
    22 posts
    Member since:
    Feb 2015

    Posted 01 Nov 2019 in reply to Svetlin Link to this post

    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

  9. Answer
    Svetlin
    Admin
    Svetlin avatar
    413 posts

    Posted 05 Nov 2019 Link to this post

    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.
Back to Top