Close KendoWindow

4 posts, 1 answers
  1. Virender
    Virender avatar
    10 posts
    Member since:
    Jun 2019

    Posted 30 Jan Link to this post

    Hi,

     

    I have Test1 Page in which there is dropdown which has Footer as "Add New" button from which I can open Test2 page as Kendo Window so that I can add records using Test2 Page and it should be display to dropdownlist. I am using typescript. I am able to add the record and I can see that comes to dropdownlist as well but I want to close the kendo window once it creates a record. I tried window.close on Test2 Page but it says script cannot close page when they are open. I know window.close() is not the right way to do it. I should be able to get the control (KendowWindow) on Test2 page and close the kendo window. Can you please help?

    Thanks

     

    Here is code -

    Test1.html

     

    <div>
    <label for="ddCedent">Cedent<span class="reqfield">*</span></label>
    <kendo-dropdownlist #ancCedent [defaultItem]="{name: 'Select cedent...', businessPartnerNumber: null}" formControlName="cedent" [data]="cedents" [filterable]="true"
    [textField]="'name'" [valueField]="'id'" [valuePrimitive]="true" class="form-control" [ngClass]="{ 'ng-invalid ng-touched': submitted && this.formControls.cedent.errors }">
    <ng-template kendoDropDownListItemTemplate let-dataItem>                  
                      {{dataItem.name}}&nbsp;&nbsp;&nbsp;&nbsp;{{dataItem.businessPartnerNumber}}
    </ng-template>
    <ng-template kendoDropDownListFooterTemplate>
    <table><tr><td></td><td style="float:right"><button kendoButton *ngIf="!openedAccount" (click)="showWindow()">Add New</button></td></tr></table>
    </ng-template>
    </kendo-dropdownlist>
    <ng-container #container1></ng-container>
    <div *ngIf="submitted && this.formControls.cedent.errors" class="k-tooltip-validation">
    <div class="reqfield" *ngIf="this.formControls.cedent.errors.required">&#9432; Cedent is required</div>
    </div>

     

    Test1.ts

    public showWindow() {
    this.opened = true;
    setTimeout(() => {
    const window: WindowRef = this.windowService.open({
    appendTo: this.containerRef,
    title: "Add Account",
    content: Test2Component,
    width: 800,
    height: 1200,
    });

    window.result.subscribe((result) => {
    if (result instanceof WindowCloseResult) {
    this.opened = false;
    this.getAccounts();
    }
    });
    });
    }

  2. Answer
    Petar
    Admin
    Petar avatar
    17 posts

    Posted 31 Jan Link to this post

    Hello Virender,

    Based on the provided information I can conclude several things:

    1. A window has to be opened using a service.
    2. The service should create a window using a component.
    3. When a button inside the window is clicked, a record has to be added to a dropdown list inside the parent component and the window has to be closed.

    I have prepared a StackBlitz which demonstrates the desired behavior here - https://stackblitz.com/edit/angular-mxqzl2

    The main takeaways from the example is that the window has to be closed when the button inside it is clicked. The issue is that there is no way to close the window from its contained component. One way of solving this is to emit an event whenever the button inside the window is clicked:

     

    (<EventEmitter<any>>windowRef.content.instance.newRecord)
      .pipe(first()) // Guard against potential memory leaks.
      .subscribe(v => {
        this.listItems.push(v); // Update the items inside the dropdown list.
        windowRef.close(); // Close the window.
    });

    Please check the example and let me know in case there is something unclear or if any further assistance is needed on this case. Thank you in advance.

    Regards,
    Petar
    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. Virender
    Virender avatar
    10 posts
    Member since:
    Jun 2019

    Posted 01 Feb in reply to Petar Link to this post

    Thank you so much. It worked for me..!!
  4. Virender
    Virender avatar
    10 posts
    Member since:
    Jun 2019

    Posted 03 Feb Link to this post

    Thanks much..!! It worked for me..!!
Back to Top