Close KendoWindow

[Virender]

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();
}
});
});
}

[Petar]

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

[Virender]

Thank you so much. It worked for me..!!

[Virender]

Thanks much..!! It worked for me..!!