Dropdown menu hidden inside kendogrid

Question

In my kendogrid I need to show a dropdown menu (on button click) and allow column resizing, showing a scroll bar if my data is too big for the grid. I'm having problems with overflow settings.

Live Sample http://jsbin.com/gayibo/4/edit?css,output

---

If I set overflow-y: scroll on my grid, the dropdown menu is not always visible.

---

On the other hand, if I set overflow-y: visible, I see overflowing rows on the right.

I've tried everything, every possible overflow combination, changing z-indexes, showing the yellow div on top of my excess row data. Nothing worked.

I also tried changing the dropdown menu to position: fixed but it gives problems when you are scrolling the window for any reason (because then the menu is not showing right under the button)

eg: Fixed positioning of menu

Browser: Chrome / Firefox (ff requires more resizing to get the same effect)

Twitter-Bootstrap: 2.3.2

Answer 1

I have also experienced this in the past with a slightly different scenario. Kendo Grid's own data validation messages would be hidden when validating the last row.

There doesn't seem to be a proper way to fix this without things getting messy, but if you are okay with this hack, you can use this code.

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

All I'm doing is simply scrolling to the bottom whenever I click on one of your custom grid buttons.

• 500 is an arbitrary height that is bigger than the kendo grid content div and the dropdown height combined.
• setTimeout is there to execute the scrolling after the scrollbar is created.

If the dropdown doesn't cause the creation of a scrollbar, that means no dropdown is hidden, and scrollTop does nothing because there is no scrollbar. If a dropdown does invoke the creation of a scrollbar, then it means it is hidden and it is okay to scroll to the very bottom.

Your updated jsBin...

Answer 2

I tried a lot of different solutions but in the end I chose to use a context-menu plugin, bootstrap themed, binding it to my button click. I'll post a sample code, hoping it will be useful for others in the same situation.

This is the context-menu plugin I'm using: https://github.com/sydcanem/bootstrap-contextmenu

It involves a little bit of coding and a plugin but I find that the result is truly excellent for my (visual) needs.

Here's the jsBin