WindowService , How to pass data to window

[Tarek]

Hi

I have a component that contains a kendo-grid of "Organizations". Its name is "OrganizationTableComponent" . In the table there is a button "edit" used to open another component "OrganizationFormComponent" in a kendo-window using WindowService.

In the "OrganizationFormComponent" , in the ngOnInit() , I want to receive the country record to show it on the form

the following is editAction() method in the OrganizationTableComponent

public editAction(){

    dataItem = this.selectedOrganization; // This is the seleced row

    console.log('editAction',dataItem);

    const windowRef = this.windowService.open({

      title: 'Edit Organization',

      content: OrganzationFormComponent,

      width: 400,

      top: 100,

      // is it possible to pass the selected row here when opening the window

    });

}

[Tarek]

There is a work around. I created a service and stored the current selected row in the service

 public onRecordSelectionEvent(event: any){

    this.organizationService.selecedRow = event.dataItem;

    console.log('onRecordSelectionEvent this.orgRow is',this.organizationService.selecedRow);

  }

 

 

[Dimiter Topalov]

Hello Tarek,

The described approach to use a service for passing data from one component to another is valid, but there are two other alternatives that can also prove useful for achieving the desired goal:

1) Access the component instance of the content component created within the Window after creating the Window component, and pass/set the desired value directly in the content component like in the following example:

https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/window/service/#toc-content-component

public showWindow() {
    const windowRef = this.windowService.open({
      title: "Success!",
      content: UserInfoComponent,
      width: 250,
    });

    const userInfo = windowRef.content.instance;
    userInfo.name = "admin";
    userInfo.age = 42;
  }

2) Create the Window by declaring it in the parent component's template (instead of using the service). This way all public fields of the parent (OrganizationTableComponent) will be available to the component used within the Window out-of-the-box. The Window component can be shown and hidden using *ngIf as necessary.

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik