Popup in modal

3 posts, 0 answers
  1. Bob
    Bob avatar
    30 posts
    Member since:
    Apr 2019

    Posted 13 Feb Link to this post

    This really annoying, can you please sort out your forum, it hardly fills us with confidence when you can't seem to get your own systems working.

    See attached file.

    How do I get the popup working in a modal?

    I have injected the popup service and it appears in the background page, see attached image.

    I would show you some code but seeing as though the forum hasn't been working all day, hey-ho!

    I'll raise a ticket instead and hope you don't knock it off my allocation....

     

  2. Svetlin
    Admin
    Svetlin avatar
    444 posts

    Posted 17 Feb Link to this post

    Hi Bob,

    Thank you for the provided screenshots and feedback. To begin with, we will check what may cause the reported behavior of the forum and will update it accordingly.

    About the Popup, by default it is appended to the root element rendered within the DOM. In order to change that behavior the Popup can be passed an [anchor] input that will specify where it will be appended. Please check the following example demonstrating such approach:

    https://stackblitz.com/edit/angular-bzplpw-lfm7t8?file=app/app.component.ts

    The essential parts are highlighted below:

    @Component({
        selector: 'my-app',
        template: `
    
            <button kendoButton *ngIf="!opened" (click)="open()">Open dialog</button>
            <kendo-dialog title="Please confirm" *ngIf="opened" (close)="close('cancel')" [minWidth]="250" [width]="450">
                <p style="margin: 30px; text-align: center;">Are you sure you want to continue?</p>
                <ng-template #template>
                  <p style="margin: 30px;">Popup content!</p>
                </ng-template>
                <button #button (click)="togglePopup(template, button)" class="k-button">Toggle popup</button>
                <kendo-dialog-actions>
                    <button kendoButton (click)="close('no')">No</button>
                    <button kendoButton (click)="close('yes')" primary="true">Yes</button>
                </kendo-dialog-actions>
            </kendo-dialog>
        `
    })
    export class AppComponent {
        public opened = false;
    
        public close(status) {
          console.log(`Dialog result: ${status}`);
          this.opened = false;
          if (this.popupRef) {
                  this.popupRef.close();
                  this.popupRef = null;
          }
        }
    
        public open() {
          this.opened = true;
        }
    
        private popupRef: PopupRef;
    
        constructor(private popupService: PopupService) {}
    
        public togglePopup(template: TemplateRef<any>, button) {
          if (this.popupRef) {
              this.popupRef.close();
              this.popupRef = null;
          } else {
              this.popupRef = this.popupService.open({
                  content: template,
                  anchor: button
              });
          }
      }

    Please check the example and let me know in case there is something unclear or if further assistance is required for this case. Thank you.

    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.
  3. Bob
    Bob avatar
    30 posts
    Member since:
    Apr 2019

    Posted 17 Feb in reply to Svetlin Link to this post

    Hi Svetlin,

    I had to find a different way round the problem but thanks for your replay.

    Btw, the problem with the forum is still not fixed.  You shuold really be on top of this.

    Cheers,
    Bob

Back to Top