I'm trying to use certain Bootstrap elements inside a Kendo Grid, for example Bootstrap dropdown buttons and tooltips.

The problem is the dropdown or tooltips are always positioned below the row below or above. I've tried adjusting the z-index of the displayed elements, but this doesn't fix it.

Has anyone managed to find a solution to this?

I'm trying to use certain Bootstrap elements inside a Kendo Grid, for example Bootstrap dropdown buttons and tooltips.

The problem is the dropdown or tooltips are always positioned below the row below or above. I've tried adjusting the z-index of the displayed elements, but this doesn't fix it.

Has anyone managed to find a solution to this?

• javascript
• web-applications
• kendo-ui

• 1 Give us code or it didn't happen. You can use jsbin. – Atanas Korchev Commented Jan 11, 2013 at 11:57
• I didn't think code would be necessary, but here's a demo on jsFiddle that shows the problem: link – Mat Commented Jan 11, 2013 at 15:50

3 Answers 3

The .btn-group class, which is the container for the dropdown-menu is positioned relatively so altering the z-index of the dropdown-menu class won't do any good. You can position is absolutely and then adjust the positioning from there. Something like this should get you started:

.k-grid-content .btn-group {
    position: absolute;
}

.k-grid-content .btn-group .btn {  
    top: -10px;
}

Link to a jsFiddle that demonstrates it in action.

The problem is to do with the Grid content being permanently set to overflow-y: scroll which it doesn't really need (unless you are a fixed height with the virtualization feature).

By changing the CSS of the grid content to remove the scroll bar, setting overflow: visible and adding extra padding to account for the missing scrollbar, it now works.

I've updated the jsFiddle to demonstrate.

Thanks for all the help.

For future reference, in case you have other grid cells that might contain data that will overflow into other columns with the above fix, you can set a class to the custom grid action column like so:

columns: [
  {
   field: "Actions", 
   title: " ", 
   filterable: false, 
   attributes: {"class": "actions-column"},
   template: <your action button template or template link here>
  }
]

Then in the styling for the page add the following CSS:

.k-grid-content tr td.actions-column {
   overflow: visible;
}

edit: small css selector change