Kendo Window as Dialog (async/await)

by sallushan

HTML

<link rel="stylesheet" href="https://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css">
<script src="https://cdn.kendostatic.com/2013.2.716/js/jquery.min.js"></script>
<script src="https://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<div>
  <button id="btnOpenPopup">
  Open Popup
  </button>
</div>


<div id="popup" style="display:none">
  <div id="popupBody">
    This is popup body<br>Trying to make it multiple lines<br>
    so that we can test for the<br>scrollbar<br>
    This is popup body<br>Trying to make it multiple lines<br>
    so that we can test for the<br>scrollbar<br>
    This is popup body<br>Trying to make it multiple lines<br>
    so that we can test for the<br>scrollbar<br>
  </div>
  <div id="popupButtonContainer">
    <button id="btnOk">
    OK
    </button>
    <button id="btnCancel">
      Cancel
    </button>
  </div>
</div>

CSS

#popupButtonContainer {
  display:flex;
  justify-content: flex-end;
  gap: 0.5em;
  padding-top:0.5em;
  border-top:1px dotted black;
}
#popupButtonContainer * {
  
}
#popupBody {
  height: calc(100% - 2em);
  overflow:auto;
}

JavaScript

function addOpenAsyncInKendowWindow(kendoWindow) {
  if (!kendoWindow.openAsync) {
    kendoWindow.bind("deactivate", () => {
      if(kendoWindow.dispatchClosePopupCall)
        kendoWindow.dispatchClosePopupCall(kendoWindow.asyncDialogResult);
    });
    kendoWindow.getResponseAsync = async () => {
      return (new Promise(resolve => kendoWindow.dispatchClosePopupCall = resolve)).then((data) => { kendoWindow.dispatchClosePopupCall = null; return data; });
    };  
    kendoWindow.openAsync = async () => {
      kendoWindow.center();
      kendoWindow.open();
      return await kendoWindow.getResponseAsync();
    };
    kendoWindow.closeOk = () => {
      kendoWindow.asyncDialogResult = true;
      kendoWindow.close();
    }
    kendoWindow.closeCancel = () => {
      kendoWindow.asyncDialogResult = false;
      kendoWindow.close();
    }
  }
}

var kp = $("#popup").kendoWindow({
	width: "400px",
  height: "150px",
	title: "Test",
  deactivate: () => {
  	console.log("old deactivate");
  }
}).data("kendoWindow");

$("#btnOk").on("click", e => {
	e.preventDefault();
  kp.closeOk();
});
$("#btnCancel").on("click", e => {
	e.preventDefault();
  kp.closeCancel();
});

$("#btnOpenPopup").on("click", async e => {
	e.preventDefault();
  addOpenAsyncInKendowWindow(kp);
  const dialogResult = await kp.openAsync();
  if (dialogResult)
  	alert("Ok was clicked");
  else
  	alert("Cancel was clicked");
});