Popup in modal

[Bob]

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....

 

[Svet]

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

[Bob]

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