带有自定义弹出模板取消绑定错误的 Kendo UI Grid

Question

这是一个 jsfiddle（不是我的，但同样的错误）。 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">&nbsp;</th>
    <td>&nbsp;</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>

当您尝试打开弹出窗口然后单击 X 关闭或取消按钮时，它不会关闭并返回：

Uncaught TypeError: ----------- has no method 'unbind'

我基本上是用 KendoUI 创建一个常规网格，但我想要一个自定义弹出编辑器来显示网格当前所做的更多字段。

Answer 1

更新版本，错误应该会消失（因为它已修复）。

基本上，您只需将脚本和样式引用更改为指向版本 913 而不是 710。

例如

<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.core.min.js"></script>