Kendo UI Grid with custom popup template unbind error - kendo-ui

Question

Here is a jsfiddle (not mine, but same error).
http://jsfiddle.net/grenal/KGsSL/73/
<script id="popup_editor" type="text/x-kendo-template">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<th width="197" scope="row">Chapter Name</th>
<td width="403"><label for="chapterName"></label>
<input type="text" name="chapterName" id="chapterName" data-bind="source: chaptername"></td>
</tr>
<tr>
<th scope="row">State</th>
<td><label for="state"></label>
<input type="text" name="state" id="state" data-bind="source: state"></td>
</tr>
<tr>
<th scope="row">Code</th>
<td><label for="code"></label>
<input type="text" name="code" id="code" data-bind="source: code"></td>
</tr>
<tr>
<th scope="row">Date Added</th>
<td><label for="dateadded"></label>
<input type="text" name="dateadded" id="dateadded" data-bind="source: dateadded"></td>
</tr>
<tr>
<th scope="row">Active</th>
<td><label for="active"></label>
<input type="text" name="active" id="active" data-bind="source: active"></td>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
</tr>
<tr>
<th scope="row">Approved</th>
<td><label for="approved"></label>
<input type="text" name="approved" id="approved" data-bind="source: approved"></td>
</tr>
<tr>
<th scope="row">Chapter Price</th>
<td><label for="chapterPrice"></label>
<input type="text" name="chapterPrice" id="chapterPrice" data-bind="source: chapterPrice"></td>
</tr>
<tr>
<th scope="row">Parent Price</th>
<td><label for="parentPrice"></label>
<input type="text" name="parentPrice" id="parentPrice" data-bind="source: parentPrice"></td>
</tr>
</table>
</script>​
$(document).ready(function() {
$("#search").click(function() {
// alert("clicked refresh");
$("#grid").data("kendoGrid").dataSource.read();
});
$("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "chaptersJson.cfm",
dataType: "json",
data: {q: function() { return $("#chapterName").val();}}
},
update: {
url: "chaptersJson.cfm?pageaction=Update",
dataType: "json"
}
},
schema: {
model: {
id: "chapterid",
fields: {
chapterid: { type:"number" },
chaptername: { type: "string" },
active: {type: "string"},
approved: {type: "string"},
chapterPrice: {type: "string"},
parentPrice: {type:"string"},
code: {type:"string"},
dateadded: {type:"date"},
state: {type:"string"}
}
}
},
pageSize: 25
},
height: 500,
filterable: false,
sortable: true,
pageable: true,
columns: [{field: "chaptername", title: "Chapter", width: 200},
{field: "state", title:"State", width: 100},
{field: "chapterPrice", title:"Chapter Price", width: 100},
{field: "parentPrice", title:"Parent Price", width: 100},
{field: "dateadded", title:"Added On", width: 100, template: '#= kendo.toString(dateadded,"MM/dd/yyyy") #'},
{command: ["edit"], title:" ", width:"210px"}
],
editable: {mode: "popup", template: $("#popup_editor").html()}
});
});
</script>
When you try to open the popup and then click the X to close or the cancel button, it doesnt close and returns:
Uncaught TypeError: ----------- has no method 'unbind'
I'm basically creating a regular grid with KendoUI, but I wanted a custom popup editor to show more fields that the grid currently does.

Answer 1

Update the version and the error should disappear (because it's fixed).
Basically you just need to change the script and style references to point to version 913 instead of 710.
e.g.
<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.core.min.js"></script>