Boostrap Dropdown Menu in Kendo Grid cell template

1
votes

We have a web application using bootstrap and kendo ui (jquery) and in one of my pages, it contains a kendo grid with some columns and a bunch of options columns. I need to add more two options and we are losing space for it on the kendo grid. I was thinking to add a dropdown menu on the kendo column using the template options and add the html for dropdonw menu over there. I have tried it with this:

{
   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>'
}

(Just break lines for easy reading).

The problem is when I run this, it works but the menu opens inside the cell and not over the cell. The user will not be able to click on these options. How can I get it working? Maybe adding a css class for this?

I have tried to add a div around the content in the template with position: absolute and z-index:9999 but it did not worked!

You can see the problem in this kendo dojo: https://dojo.telerik.com/EBOSEsub

2
javascripthtmljquerycsskendo-ui
The z-index solution won't work unless you position your parent elements as well z-index - Parco

2 Answers

2
votes

Try this:

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

It's also possible for overflow to be initial or inherit.

-1
votes

I'd suggest using the following css solution, unless there are other elements you plan on using inside the table.

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

Desired result