Appending Dialog to Body by default

3 posts, 0 answers
  1. James
    James avatar
    26 posts
    Member since:
    Nov 2015

    Posted 28 Jan 2019 Link to this post

    How do we append the Dialog to <body> by default?

    Something equivalent of  POPUP_CONTAINER but for Dialog?

     

    PS: We are migrating a fairly large app from Kendo UI for AngularJs to Kendo UI for Angular, AngularJs App has a "PopupService"  which wraps around  $kWindow from angular-kendo-window, $kWindow appends to Body by default and would like to replicate the behaviour using DialogService

    Thanks

  2. James
    James avatar
    26 posts
    Member since:
    Nov 2015

    Posted 28 Jan 2019 in reply to James Link to this post

    well figured it out, got a a bit of help from Notification code:

    Firstly the DialogContainerComponent

    @Component({
        selector: 'app-dialog-container',
        template: `<ng-template kendoDialogContainer></ng-template>`
    })
    export class DialogContainerComponent {
     
    }
    private ensureKendoDialogContainer() {
            if (this.dialogContainerAttached) { return; }
     
            const dialogContainerComponent = this.resolver.resolveComponentFactory<DialogContainerComponent>(DialogContainerComponent)
            .create(this.injector);
     
            this.applicationRef.attachView(dialogContainerComponent.hostView);
            const hostViewElement = ( dialogContainerComponent.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
            document.body.appendChild(hostViewElement);
            this.dialogContainerAttached = true;
        }     
  3. Svetlin
    Admin
    Svetlin avatar
    391 posts

    Posted 30 Jan 2019 Link to this post

    Hi James,

    I am glad that you managed to find a solution about this case.

    I would also like to add, that we can use the built in appendTo input property of the DialogSettings used by the DialogService to append the Dialog to the desired HTML element. 

    I hope this helps. 

    Regards,
    Svetlin
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top