Kendo Multiselect change the zindex of dropdown list div - kendo-ui

Question

I am using Kendo Multiselect control. I wish to change the Z-index of the control. Here is the rendered html markup from the firebug window.
<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>
The jquery code under the Dom ready event is :-
$("#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');
});
The problem is every time the dropdown opens it goes back to the z-index value of "10002". I want to set the z-index to "90" every time the dropdown opens or when the dropdown remained open.
Please suggest the soln.

Answer 1

The problem is that the first time you open the list, the k-animation-container does not yet exist, so you cannot set the z-index. On consequent opens, the KendoUI framework always resets the z-index to 1002.
I guess one workaround is for you set set the z-index after a small delay so you are sure the container is there and that KendoUI is done messing with the 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');
}
In this example I have introduced a 200 millisecond delay.
DEMO