How to get kendoNotification display with kendoWindow

Question

I am trying to use kendoNotification with kendoWindow. I it works, but the kendoNotification display behind the kendoWindow. I tried changing the z-index on both but to no avail. How can I get the the kendoNotification to display on top of the kendoWindow?

Relevant code

    displayNotes.data("kendoWindow").content(
            "<div>" +
            "<span id='popupValidation'></span>" +
            "  <input type='hidden' id='NoteDate' value=''  />" +
            "  <input type='hidden' id='NoteID' />" +
            "  <div style='margin:5px'>" +
            "    <label>Subject: </label>" +
            "    <input type='text' class='search1'; " +
            "      style='width: 300px; float:right;'" +
            "      id='Subject' ></input>" +
            "  </div>" +
            "  <div style='margin:30px 5px 5px 5px;'>" +
            "  <label style='margin-left:15px;'>Detail: </label>" +
            "  <textarea id='Detail' style='width: 304px;  float:right; height: 155px;'> </textarea>" +
            "  </div>" +
            "  <div style='margin-top:160px;' align='center'>" +
            "    <a onclick='SaveNewNote()'  style='width: 70px;' class='k-button'>Save</a>" +
            "    <a onclick='CloseNoteWindow()'  style='width: 75px;' class='k-button'>Cancel<a/>" +
            "  <div>" +
            "</div>").title("Add Note");
    displayNotes.data("kendoWindow").open().center();
});

function SaveNewNote(message)
{

    var popupNotification = $("#popupValidation").kendoNotification().data("kendoNotification");

    popupNotification.setOptions({
        position: {
            top: 260,
            left: Math.floor($(window).width() / 2 - 110),
            bottom: 0,
            right: 0
        }
    });
    popupNotification.show(message, "error");
}

Answer 1

I was having the same problem, and asked the question in the Kendo UI forums, the answer that came back was to use the onShow event handler to set the z-index in the CSS. Change your code to the following and it should work:

popupNotification.setOptions({
  position: {
    top: 260,
    left: Math.floor($(window).width() / 2 - 110),
    bottom: 0,
    right: 0
  },
  show: onShow
});

function onShow(e) {
  e.element.parent().css({
    zIndex: 22222
  });
}