在 Kendo 中为 Angular 的对话框添加上下文菜单

Question

在这个 StackBliz 中，我有一个 Kendo for Angular 对话框，其中包含一个上下文菜单。

如果右键单击，您应该会看到上下文菜单，但它显示在对话框后面。如何更改上下文菜单 z-index 使其显示在顶部？我尝试添加样式，但没有用。

 @Component({
    selector: 'my-app',
    template: `

      <kendo-dialog title="Menu inside" *ngIf="opened" (close)="close()">

       <div #target1>Right click to see the context menu</div>
       <kendo-contextmenu style="z-index:20000" [target]="target1">
               <kendo-menu-item text="Option 111"></kendo-menu-item>
               <kendo-menu-item text="Option 222"></kendo-menu-item>
               <kendo-menu-item text="Option 333"></kendo-menu-item>           
               <kendo-menu-item text="Option 444"></kendo-menu-item>           
               <kendo-menu-item text="Option 555"></kendo-menu-item>           
               <kendo-menu-item text="Option 666"></kendo-menu-item> 
               <kendo-menu-item text="Option 777"></kendo-menu-item>           
      </kendo-contextmenu>

          <kendo-dialog-actions>
              <button kendoButton (click)="close()" [primary]="true">Close</button>
          </kendo-dialog-actions>
      </kendo-dialog>
    `,
    styles: [` 
                .k-dialog { z-index:2 !important } 
                .k-overlay { z-index:1 !important }
            `],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {

    public opened: bool = true;

    public close() {
      this.opened = false;
    }
}

Answer 1

解决方案是将对话框的 z-index 更改为 k-dialog-wrapper

.k-dialog-wrapper { z-index:2 !important }

在 Kendo 中为 Angular 的对话框添加上下文菜单

Adding context menu to Dialog in Kendo for Angular

kendo-ui

kendo-ui-angular2