网格中的拆分按钮显示在行后面 - 剑道 UI

我一直在使用剑道UI网格，并一直在尝试将其拆分按钮集成到网格中。

我的问题是拆分按钮的下拉菜单显示在它下面的行后面。 我一直在摆弄检查器中的下拉css，但无法让菜单显示在前面。

我一直在查看展开拆分按钮时生成的.k-animation-container。 它是用position: absolute和z-index: 1002生成的。 到目前为止，调整下拉列表和周围元素的 z 索引和位置值尚未产生解决方案。

我建议看看这个小提琴，为了完整起见，这里包含的代码。

爪哇语

(function () {
  gridName = '#theGrid';
    $(gridName).kendoGrid({
    columns: [
            {
                title: '',
                field: '',
                filterable: false,
                width: 200,
                template: function (dataItem) {             
                    return $('#splitBtnTemplate').clone().html();
                }
            },
            { title: 'Subject', field: 'Subject', filterable: true, width: 200 },                 
            { title: 'Status', field: 'Status', filterable: true, width: 80 }
        ],
        dataSource: {
            data: [
                { Subject: "Subject", Sent: "Sent", Completed: "Completed",  Status: "Status1"},
                { Subject: "Subject", Sent: "Sent", Completed: "Completed",  Status: "Status2"},
                { Subject: "Subject", Sent: "Sent", Completed: "Completed",  Status: "Status3"},
            ],
        },
        dataBound: function(e){
            $(".myMenu").kendoMenu({
                openOnClick: true
        });
        }   
    });    
})();

.HTML

<div id="theGrid" class=""></div>
<div style="display: none;" id="splitBtnTemplate">
  <ul class="myMenu">
    <li class="defaultItem" data-action="1">Actions</li>
    <li class="emptyItem"><span class="empty">&nbsp;</span>
    <ul>
        <li onclick="actionBtn();">Cancel</li>
        <li onclick="actionBtn();">View</li>
        <li onclick="actionBtn();">Upload</li>
      </ul>
    </li>
 </ul>
</div>

.CSS

.myMenu {
    display: inline-block;
    height: 28px;
    font:12px sans-serif;
}
    .myMenu .k-animation-container {
    }
    .myMenu .defaultItem{
        margin-top: -1px;
        height: 28px;
    }
    .myMenu .emptyItem {
        border-right-width: 0;
        margin-right: -1px;
        height: 28px;
    }
    .myMenu .k-first{
        border-bottom: none !important;
        margin-top: -1px;
    }
        .myMenu .emptyItem > .k-link {
            padding-left: 0 !important;
        }