Kendo 网格单元格模板中的 Bootstrap 下拉菜单

Question

我们有一个使用 bootstrap 和 kendo ui (jquery) 的 Web 应用程序，在我的一个页面中，它包含一个 kendo 网格有一些列和一堆选项列。我需要添加更多的两个选项，我们在 kendo 网格上失去了 space。我正在考虑使用 template 选项在 kendo 列上添加一个下拉菜单，并在此处添加 html 用于 dropdonw 菜单。我试过这个：

{
   template: '<div class="dropdown"><button class="btn btn-secondary dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown link</button>
              <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                <a class="dropdown-item" href="\#">Action</a>
                <a class="dropdown-item" href="\#">Another action</a>
                <a class="dropdown-item" href="\#">Something else here</a>
              </div>
              </div>'
}

（为了方便阅读，只是换行）。

问题是当我运行这样做时，它可以工作，但菜单在单元格内打开，而不是在单元格上方打开。用户将无法单击这些选项。我怎样才能让它工作？也许为此添加一个 css class？

我尝试用 position: absolute 和 z-index:9999 在模板中的内容周围添加 div，但没有成功！

你可以在这个 kendo dojo 中看到问题：https://dojo.telerik.com/EBOSEsub

Answer 1

我建议使用以下 css 解决方案，除非您计划在 table.

中使用其他元素

.k-master-row td {
  overflow: auto;
}

Answer 2

试试这个：

.k-master-row td {
    overflow: visible;
}

overflow也有可能是initial或inherit。

Kendo 网格单元格模板中的 Bootstrap 下拉菜单

Boostrap Dropdown Menu in Kendo Grid cell template

html

javascript

css

jquery

kendo-ui