How can I change the parent of actionSheet

[Tarek]

Hi

I am using angular 13.

My page contains a button "New Application"

I press a button to open the window "Search for applicant"

the window is open , it contains another buttton with label "continue"

I press the "coninue" button to open the action sheet. the action sheet is open at the back and attached to the parent page not to the window.

here is the HTML

<kendo-window
  title="Search For Applicant"
  *ngIf="opened"
  (close)="close()"
  [minWidth]="800"
  [width]="1200"
  [height]="650"
>
  <dhaman-entities></dhaman-entities>
  <kendo-dialog-actions>
    <button  id="openActionSheetBttn" kendoButton (click)="Start()" themeColor="primary">
      Continue..
    </button>
  </kendo-dialog-actions>
</kendo-window>
<kendo-actionsheet
*ngIf="openActionSheet"
(itemClick)="acOnItemClick()"
(overlayClick)="acOnOverlayClick()"
[title]="title"
[items]="items"
>
</kendo-actionsheet>

public openActionSheet = false;
  public title = 'Select item';
  public items: ActionSheetItem[] = [
    {
      title: 'Edit Item',
      iconClass: 'k-icon k-i-edit',
    },
    {
      title: 'Add to Favorites',
      iconClass: 'k-icon k-i-heart',
    },
  ];

.k-actionsheet-container {
  width: 100%;
  height: 100%;
  z-index: 1;
}
.k-actionsheet-container > .k-overlay {
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
}

[Slavena]

Hello Tarek,

This question has been answered in a private support thread, but I am pasting the answer here as well for reference:

To render the component inside the Window, the ActionSheet should be nested inside the Window component as part of its content:

<kendo-window ...>
       <kendo-actionsheet ...>
       </kendo-actionsheet>
        ...
</kendo-window>

Additionally, the position of the .k-actionsheet-container element should be set to absolute:

 .k-actionsheet-container {
      position: absolute;
}

The following example demonstrates this approach:

https://stackblitz.com/edit/angular-nlvzl5-zq8trp?file=src%2Fapp%2Fapp.component.ts

Regards,
Slavena
Progress Telerik

[Tarek]

Thank you so much