【问题标题】:How can we display the menu items at the top我们如何在顶部显示菜单项
【发布时间】:2013-11-30 14:18:40
【问题描述】:

我在下面的小提琴中定义了剑道窗口。 我们如何在顶部显示剑道菜单项。

小提琴链接: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
                    });

【问题讨论】:

    标签: kendo-ui kendo-menu


    【解决方案1】:

    没有真正的好方法来做到这一点。元素的堆叠方式有点 CSS 限制。该表格使用围绕它的 div 来提供垂直滚动 (overflow: scroll;),并且菜单的下拉菜单位于该包装器内,因此当它打开时,它将被表格底部截断。此外,各个表格单元格也被 Kendo 设置为 overflow:hidden;

    如果您只有 3 个项目的下拉菜单,您可能希望使用 Kendo DropDown 小部件。如果我没记错的话,它会将其内容附加到文档的末尾而不是表格单元格中的内联,因此能够在表格的边界上显示自己。

    【讨论】:

    • 那我该怎么办呢?
    【解决方案2】:

    使用以下css代码解决问题

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

    谢谢

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-11-28
      • 1970-01-01
      • 2022-01-06
      • 1970-01-01
      • 2018-10-01
      • 2013-02-10
      相关资源
      最近更新 更多