隐藏在kendogrid内的下拉菜单

Question

在我的 kendogrid 中，我需要显示下拉菜单（按钮点击）和允许列调整大小，如果我的话显示滚动条数据对于网格来说太大了。我遇到溢出设置问题。

实时样本 http://jsbin.com/gayibo/4/edit?css,output

---

如果我在网格上设置overflow-y: scroll，则下拉菜单并不总是可见。

---

另一方面，如果我设置overflow-y: visible，我会在右侧看到溢出的行。

我已经尝试了一切，每个可能的溢出组合，更改z索引，在我的多余行数据上显示黄色div。没有任何效果。

我也尝试将下拉菜单更改为position: fixed，但是当您因任何原因滚动窗口时会出现问题（因为菜单没有显示在按钮下方）

例如：固定菜单定位

浏览器：Chrome / Firefox（ff需要更多调整大小才能获得相同的效果）

Twitter-Bootstrap：2.3.2

Answer 1

过去我也经历过这种情况略有不同。在验证最后一行时，将隐藏Kendo Grid自己的数据验证消息。

似乎没有一种正确的方法来解决这个问题而不会让事情变得混乱，但是如果你对这个hack没问题，你可以使用这个代码。

     $('#grid').on('click', '.btn.btn-mini.dropdown-toggle',function(e){
        setTimeout(function(){
          var gridSpace = $('.k-grid-content');
          gridSpace.animate({scrollTop:500});
        },50);
      });

每当我点击一个自定义网格按钮时，我所做的只是滚动到底部。

• 500是一个任意高度，大于kendo网格内容div和下拉高度组合。
• setTimeout用于在创建滚动条后执行滚动。

如果下拉列表没有导致创建滚动条，则表示没有隐藏下拉列表，并且scrollTop不执行任何操作，因为没有滚动条。如果下拉列表确实调用了滚动条的创建，则表示它已隐藏，可以滚动到最底部。

您更新的jsBin ...

Answer 2

我尝试了很多不同的解决方案，但最后我选择使用context-menu plugin，bootstrap主题，将其绑定到我的按钮点击。我将发布一个示例代码，希望它对同样情况下的其他人有用。

这是我正在使用的上下文菜单插件：http://sydcanem.github.io/bootstrap-contextmenu/

它涉及一些编码和插件，但我发现结果真的非常适合我的（视觉）需求。

这是jsBin