kendo window not closing on click of the button - asp.net-mvc-5

Question

I have created a view which is rendered in the kendo window. I have the cancel button on the view. I would like to close the window When I click the cancel button. I have written the code to do it. But nothing seems happening.
Please see the code and screen shot below
Kendo window code
$("#contextMenu").kendoContextMenu({
target: "#grid",
alignToAnchor: false,
select: function (e) {
var selectedItem = e.item; // check this item is add or edit and then open the kendo window
if ($(selectedItem).text() == 'Add' || $(selectedItem).text() == 'Edit') {
var accessWindow = $("#addEdit").kendoWindow({
actions: {}, /*from Vlad's answer*/
draggable: true,
height: "700px",
modal: true,
resizable: false,
title: "Add new User",
width: "800px",
visible: false,
}).data("kendoWindow").center().open();
$("#btnCancel").click(function () {
$(this).closest("[data-role=window]").data("kendoWindow").close();
});
$("#language").kendoDropDownList({
filter: "startswith",
dataTextField: "LanguageDescription",
dataValueField: "LanguageCode",
dataSource: language
//dataSource: {
// type: "odata",
// serverFiltering: true,
// transport: {
// read: {
// url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
// }
// }
//}
});
$("#country").kendoDropDownList({
filter: "startswith",
dataTextField: "CountryDescription",
dataValueField: "CountryCode",
dataSource: country
//dataSource: {
// type: "odata",
// serverFiltering: true,
// transport: {
// read: {
// url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
// }
// }
//}
});
}
}
});
The view that is rendered in the kendo window
<div id="addEdit" style="width 100%; height 100%; background-color #fff;">
<div class="demo-section k-content">
<ul class="fieldlist">
<li>
<label for="simple-input" >Employee Number</label>
<input id="simple-input" type="text" class="k-textbox" style="width: 40%;" />
</li>
<li>
<label for="simple-input">ForeName</label>
<input id="simple-input" type="text" class="k-textbox" style="width: 40%;" />
</li>
<li>
<label for="simple-input">ForeName</label>
<input id="simple-input" type="text" class="k-textbox" style="width: 40%;" />
</li>
<li>
<label for="simple-input">Surname</label>
<input id="simple-input" type="text" class="k-textbox" style="width: 40%;" />
</li>
<li>
<label for="simple-input">Preferred Name</label>
<input id="simple-input" type="text" class="k-textbox" style="width: 40%;" />
</li>
<li>
<label for="simple-input" class="form-horizontal">Language</label>
<input id="language" class="form-horizontal" style="width: 40%;" />
</li>
<li>
<label for="simple-input">Country</label>
<input id="country" style="width: 40%;" />
</li>
<li>
<label for="simple-input">Time Zone</label>
<input id="simple-input" type="text" class="k-textbox" style="width: 40%;" />
</li>
<li>
<label for="simple-input">Domain</label>
<input id="simple-input" type="text" class="k-textbox" style="width: 40%;" />
</li>
<li>
<label for="simple-input">Network Id</label>
<input id="simple-input" type="text" class="k-textbox" style="width: 40%;" />
</li>
<li>
<label for="simple-input">Email Address</label>
<input id="simple-input" type="text" class="k-textbox" style="width: 40%;" />
</li>
<li>
<label for="simple-input">Status</label>
<input id="simple-input" type="text" class="k-textbox" style="width: 40%;" />
</li>
<li>
<button id="btnCancel" class="k-button">Cancel</button>
<button class="k-button k-primary">Save</button>
</li>
</ul>
<style>
.fieldlist {
margin: 0 0 -2em;
padding: 0;
}
.fieldlist li {
list-style: none;
padding-bottom: 2em;
}
.fieldlist label {
display: block;
padding-bottom: 1em;
font-weight: bold;
text-transform: uppercase;
font-size: 10px;
color: #444;
}
</style>
</div>
</div>

Answer 1

This has been resolved. I had to add the following jquery to fix it
$("#btnCancel").click(function () {
$(this).closest("[data-role=window]").data("kendoWindow").close();
});