How can we display the menu items at the top

Question

I have defined the kendo window in the following fiddle. How can we display the kendo menu items at the top.

the fiddle link : http://jsfiddle.net/Naidu526/gX2tM/

How can i display the menu on top.

I have written the code like:

Html:

 <div id="myGrid"></div>

Js:

 var data = [ {name:"Sri"},{name:"balu"}];


   var pendingrequestsdts = new kendo.data.DataSource({
                           data: data
                    });

                    // defined the kendo grid
                    $("#myGrid").kendoGrid({
                        dataSource: pendingrequestsdts,
                        reorderable: true,
                        sortable: true,                         
                        resizable: true,
                        selectable: true,                      

                        columns: [
                            { field: "name", title: "Name", width: "100px" },

                             {
                                 field: "", title: "", template:
                                 '<ul class="menu2" style="width:78px;"><li>Select<ul><li id="Accept" ><a >Accept</a></li><li id="Reject"><a>Reject</a></li><li id="Ignore"><a>Ignore</a></li></ul></li></ul>',width:100
                             },
                        ],

                        dataBound: function (e) {


                            //Initialization of kendo menu 
                            $(".menu2").kendoMenu({                                 

                            });
                        },
                            editable:false
                    });

Answer 1

There isn't really a good way to do that. It is a bit of a CSS limitation with the way the elements are stacked. The table uses a div around it to provide the vertical scrolling (overflow: scroll;), and the dropdown for the menu is inside that wrapper, so when it is open it will be cut off by the bottom of the table. Plus the individual table cells are set to overflow:hidden; by Kendo as well.

If you just have a dropdown of 3 items, you might want to use a Kendo DropDown widget instead. If I remember correctly, it appends its contents to the end of the document instead of inline in the table cell, so will be able to show itself over the boundaries of the table.

Answer 2

Use the following css code to solve the issue

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

thanks