剑道网格单元模板中的引导下拉菜单

Posted 2023-05-07

【中文标题】剑道网格单元模板中的引导下拉菜单

【英文标题】：Boostrap Dropdown Menu in Kendo Grid cell template

【发布时间】：2021-10-10 19:02:16

【问题描述】：

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

   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 类？

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

你可以在这个剑道道场看到问题：https://dojo.telerik.com/EBOSEsub

【问题讨论】：

z-index 解决方案将不起作用，除非您也定位父元素z-index

【参考方案1】：

试试这个：

.k-master-row td 
    overflow: visible;

overflow 也可以是initial 或inherit。

【讨论】：

谢谢@jpllosa，它按预期工作。在此处查看结果：dojo.telerik.com/EBOSEsub/11

【参考方案2】：

我建议使用以下 css 解决方案，除非您计划在表格中使用其他元素。

.k-master-row td 
  overflow: auto;

【讨论】：

没用，我尝试在Dojo上添加你的建议，但我遇到了同样的问题，看看它：dojo.telerik.com/EBOSEsub/7，如果你改变它，给我链接.谢谢！

你刚刚分享的链接非常适合我@FelipeOriani