Как отобразить пункты меню вверху

Question

Я определил окно кендо в следующем скрипке. Как мы можем отображать элементы меню кендо в верхней части.

скрипка ссылка: http://jsfiddle.net/Naidu526/gX2tM/

Как я могу отобразить меню сверху.

Я написал код, как:

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

Существует не очень хороший способ сделать это. Это немного ограничение CSS с тем, как элементы сложены. В таблице используется div, чтобы обеспечить вертикальную прокрутку (overflow: scroll;), а раскрывающееся меню для этого объекта находится внутри этой оболочки, поэтому, когда оно открыто, оно будет обрезано нижней частью таблицы. Кроме того, индивидуальные ячейки таблицы установлены также overflow:hidden; от Kendo.

Если у вас просто выпадающее меню из 3 предметов, вы можете использовать виджет Kendo DropDown. Если я правильно помню, он добавляет его содержимое в конец документа вместо встроенного в ячейку таблицы, поэтому сможет показать себя над границами таблицы.

Answer 2

Используйте следующий код CSS, чтобы решить вопрос

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

благодаря