Kendo 多选改变下拉列表的zindex div

Question

我正在使用 Kendo 多选控件。我想更改控件的 Z-index。这是 firebug window 中呈现的 html 标记。

<div class="k-animation-container" style="width: 383px; height: 124px; margin-left: -10px; padding-left: 10px; padding-right: 10px; padding-bottom: 15px; overflow: hidden; display: none; position: absolute; top: 237.4px; z-index: 10002; left: 275.4px; box-sizing: content-box;">    
    <div class="k-list-container k-popup k-group k-reset" id="selInvestors-list" data-role="popup" style="height: auto; display: none; font-size: 12px; font-family: Arial,Helvetica,sans-serif; font-stretch: normal; font-style: normal; font-weight: 400; line-height: 15.2px; width: 377.2px; transform: translateY(-123px); position: absolute;">        
        <ul class="k-list k-reset" unselectable="on" style="overflow: auto; height: auto;" tabindex="-1" role="listbox" aria-hidden="true" id="selInvestors_listbox" aria-live="polite">
          <li class="k-item" unselectable="on" data-idx="2" role="option" tabindex="-1">Client</li>
          <li class="k-item" unselectable="on" data-idx="3" role="option"  tabindex="-1">Employees</li>
          <li class="k-item" unselectable="on" data-idx="4" role="option" tabindex="-1">Other</li>        
    </ul>        
 </div>

Dom就绪事件下的jquery代码是：-

    $("#selInvestors").kendoMultiSelect({
                dataTextField: "text",
                dataValueField: "bitwiseval",
                dataSource: invJsonObj

            });

            var selinvCtl = $("#selInvestors").data("kendoMultiSelect");

            selinvCtl.bind("open", function (e) {
                //console.log("open event handler");
                e.sender.list.closest(".k-animation-container").css('z-index', '90');
            });

问题是每次打开下拉菜单时，它都会回到“10002”的 z-index 值。每次打开下拉菜单或下拉菜单保持打开状态时，我都想将 z-index 设置为“90”。

请提出解决方案。

Answer 1

问题是第一次打开列表时，k-animation-container还不存在，所以不能设置z-index。在随后打开时，KendoUI 框架总是将 z-index 重置为 1002。

我想一个解决方法是让你在稍有延迟后设置 z-index，这样你就可以确定容器在那里并且 KendoUI 已经完成了对 z-index 的处理：

var selinvCtl = $("#select").data("kendoMultiSelect");

selinvCtl.bind("open", function (e) { 
  setTimeout(setZIndex90, 200, e);              
});

function setZIndex90(event) {
   event.sender.list.closest(".k-animation-container").css('z-index', '90'); 
}

在此示例中，我引入了 200 毫秒的延迟。

DEMO

Kendo 多选改变下拉列表的zindex div

Kendo Multiselect change the zindex of dropdown list div

multi-select

kendo-ui

kendo-multiselect