在 Kendo 网格顶部显示 Div

Question

我正在使用 Kendo 网格来显示数据的网格视图。我有一个带有按钮的列，单击该按钮时，会在页面顶部和按钮左侧显示选项列表。

我没有使用 Kendo 弹出菜单或上下文菜单，只是使用带有结构指令逻辑的 ng-template。

我在寻找什么？

我得到了什么？

这是我的 Kendo 网格列：

<div style="position: relative">
  <kendo-grid>
  ...
    <kendo-grid-column title="SAMPLE">
     <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
       <div class="context-dropdown-menu" *ngIf="showIndex === rowIndex && showDialog" style="position: absolute;">
         <ul>
           <li> <i class="fa fa-envelope"></i> Item2.1 </li>
           <li> <i class="fa fa-envelope"></i> Item2.2 </li>
           <li> <i class="fa fa-envelope"></i> Item2.3 </li>
         </ul>
       <div>
       <button type="button" (click)="clicked(rowIndex)"> Click </button>
      </ng-template>
   </kendo-grid-column>
...
  </kendo-grid>
</div>

提前致谢！

Answer 1

在您的 stackblitz 示例中替换以下样式，它将正常工作。

.context-dropdown-menu {
  margin: 0 -10.75rem;
  padding: 0px;
  width: 170px;
  z-index: 999999;
}

.context-dropdown-menu ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
  background: #e4e4e4
 }

.context-dropdown-menu ul li {
  font-size: 13px;
  padding: 7px 10px;
  border-bottom: 1px solid #efefef;
  color: #617189;
  cursor: pointer;
}

.context-dropdown-menu ul li:hover {
  background: #f5f5f5;
 }

在 Kendo 网格顶部显示 Div

Display Div on top of Kendo Grid

css

kendo-grid

angular