How to get kendoNotification display with kendoWindow

kendo-ui, kendo-window

Solution

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
  });
}

Problem

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"); } ```

Original source