Uncaught TypeError: Object 1 has no method 'unbind' when closing custom popup

[Ben]

I'm using a Detailview grid that has a custom popup editor with an upload widget. When I hit edit, the popup displays as expected and I can upload a file. On successful file upload the popup window automatically closes (I would like to stop this from happening) and I get an exception "Uncaught TypeError: Object 1 has no method 'unbind'" in kendo.all.min.js, line 11.

Anyone have any ideas on what could be causing the exception and how to stop the popup window from closing once the upload is complete? I've been fighting with this all day and am no closer to finding a solution...

For reference I'm using KendoUI v2012.3.1304, below is the source code in all its hacked up glory.

@model List<MMWIDPlus.Areas.Admin.Models.ApplicationViewModel>

@section head {
    <script type="text/javascript">
        function KendoGrid_Error(e) {
            var window = $("#window").kendoWindow({
                width: '350px',
                height: '150px',
                modal: true
            }).data("kendoWindow");

            if (e.errorThrown.indexOf("authorized") > -1) {
                $("#ApplicationCategoryGrid").hide();
                $("#ApplicationGrid").hide();

                window.title("Authorization Error");
                window.content("<div style=\"background: url( '../images/lock-icon_32x32.png' ) no-repeat; padding-left: 40px;\">" + e.errorThrown + "</div><div style=\"text-align:right;\"><input type=\'button\' id=\'close\' value=\'Ok\' />");
            } else {
                window.title("Error");
                window.content("<div style=\"background: url( '../images/App-warn-icon_32x32.png' ) no-repeat; padding-left: 40px;\">" + e.errorThrown + "</div><div style=\"text-align:right;\"><input type=\'button\' id=\'close\' value=\'Ok\' />");
            }

            $("#close").click(function () {
                $("#window").data("kendoWindow").close();
            });

            window.center();
            window.open();
        };

        $(document).ready(function () {
            var applicationCategoryDataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: '@Url.Action( "ApplicationCategoryList", "Applications", new {
                             @Area = "Admin"
                         } )',
                        type: 'post',
                        dataType: 'json'
                    },
                    create: {
                        url: '@Url.Action( "CreateApplicationCategory", "Applications", new {
                             @Area = "Admin"
                         } )',
                        type: 'post',
                        dataType: 'json'
                    }
                },
                schema: {
                    model: {
                        Id: 'Id',
                        fields: {
                            Title: { type: 'string' },
                            Description: { type: 'string' }
                        }
                    }
                },
                error: KendoGrid_Error,
                pageSize: 10,
                serverPaging: true,
                serverFiltering: false,
                serverSorting: false
            });

            var applicationDataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: '@Url.Action( "ApplicationList", "Applications", new {
                             @Area = "Admin"
                         } )',
                        type: 'post',
                        dataType: 'json'
                    },
                    create: {
                        url: '@Url.Action( "CreateApplication", "Applications", new {
                             @Area = "Admin"
                         } )',
                        type: 'post',
                        dataType: 'json'
                    },
                    update: {
                        url: '@Url.Action( "UpdateApplication", "Applications", new {
                             @Area = "Admin"
                         } )',
                        type: 'post',
                        dataType: 'json'
                    },
                    destroy: {
                        url: '@Url.Action( "DeleteApplication", "Applications", new {
                             @Area = "Admin"
                         } )',
                        type: 'post',
                        dataType: 'json'
                    }
                },
                schema: {
                    model: {
                        id: 'Id',
                        fields: {
                            ApplicationCategoryId: { type: 'number' },
                            ApplicationCategoryTitle: { editable: false, type: 'string' },
                            Id: { editable: false, type: 'number' },
                            Title: { type: 'string' },
                            Icon: { type: 'string' },
                            Description: { type: 'string' },
                            Timestamp: { editable: false, hidden: true },
                            URL: { type: 'string' }
                        }
                    }
                },
                error: KendoGrid_Error,
                pageSize: 10,
                serverPaging: true,
                serverFiltering: false,
                serverSorting: false
            });

            $("#ApplicationCategoryGrid").kendoGrid({
                columns: [
                    { field: 'Title', title: 'Title', type: 'string', width: 200 },
                    { field: 'Description', title: 'Description', type: 'string' }
                ],
                dataSource: applicationCategoryDataSource,
                detailTemplate: kendo.template($("#template").html()),
                detailInit: detailInit,
                editable: {
                    mode: 'popup',
                    create: true,
                    update: false,
                    destroy: false,
                },
                height: $(document).height() - 350,
                navigatable: true,
                pageable: {
                    pageSize: 10,
                    input: true,
                    previousNext: true,
                    refresh: true,
                    info: true,

                },
                resizable: true,
                scrollable: true,
                sortable: true,
                toolbar: [
                    'create'
                ]
            });

            function detailInit(e) {
                var detailRow = e.detailRow;

                detailRow.find("#ApplicationGrid").kendoGrid({
                    dataSource: applicationDataSource,
                    editable: {
                        mode: 'popup',
                        create: true,
                        update: true,
                        destroy: true,
                        template: $("#popup_editor").html(),
                    },
                    edit: function (e) {
                        $("#IconUpload").data("kendoUpload").bind("upload", function (e) {
                            e.data = { Id: $("#Id").val() }
                        });

                        $("#IconUpload").data("kendoUpload").bind("success", function (e) {
                            applicationDataSource.read(); // Can probably remove this when the "Object has not method called 'unbind' error is fixed.
                        });
                    },
                    scrollable: false,
                    sortable: {
                        mode: 'multiple',
                    },
                    pageable: {
                        pageSize: 10,
                        input: true,
                        previousNext: true,
                        refresh: true,
                        info: true,

                    },
                    resizable: true,
                    navigatable: true,
                    toolbar: [
                        "create"
                    ],
                    columns: [
                        { template: '<img src="#=Icon#" alt="#=Icon#" width="100%" />', title: 'Icon', width: 80 },
                        { template: '<div style="font-weight:bold;">#=Title#</div><div>#=Description#</div><div><a href="#=URL#" target="_blank">#=URL#</a>', title: 'Details', width: 300 },
                        { command: ['edit', 'destroy'], title: 'Action', width: 180 }
                    ]
                });
            }
        });

        function resizeGrid() {
            var gridElement = $("#ApplicationCategoryGrid");
            var dataArea = gridElement.find(".k-grid-content");
            var newGridHeight = $(document).height() - 350;
            var newDataAreaHeight = newGridHeight - 65;
            dataArea.height(newDataAreaHeight);
            gridElement.height(newGridHeight);
            $("#ApplicationCategoryGrid").data("kendoGrid").refresh();
        }

        $(window).resize(function () {
            resizeGrid();
        });
    </script>
}

<div id="window" style="display: none;"></div>

<div id="ApplicationCategoryGrid"></div>

<script type="text/x-kendo-template" id="template">
    <div id="ApplicationGrid"></div>
</script>

<script id="popup_editor" type="text/x-kendo-template">
<input type="hidden" name="Id" id="Id" data-bind="source:Id">

<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <th scope="row">Title:</th>
        <td>
            <label for="Title"></label>
            <input type="text" name="Title" id="Title" data-bind="source: Title">
        </td>
    </tr>
    <tr>
        <th scope="row">Description:</th>
        <td>
            <label for="Description"></label>
            <input type="text" name="Description" id="Description" data-bind="source:Description">
        </td>
    </tr>
    <tr>
        <th scope="row">URL:</th>
        <td>
            <label for="URL"></label>
            <input type="text" name="URL" id="URL" data-bind="source:URL">
        </td>
    </tr>
    <tr>
        <th scope="row">Icon:</th>
        <td>
            <label for="Icon"></label>
            <img src="#=Icon#" alt="#=Icon#" width: 60px;>#=Icon#</a>
            <input type="hidden" name="Icon" id="Icon" data-bind="source:Icon">
            <input type="file" name="IconUpload" id="IconUpload" data-role="upload" data-async='{saveUrl:"@Url.Action( "UploadApplicationIcon", "Applications", new {
                                                                                                                                 @Area = "Admin"
                                                                                                                             } )", autoUpload:"false"}'
        </td>
    </tr>
    <tr>
        <th scope="row">Category:</th>
        <td>
            <label for="Category"></label>
            <select name="ApplicationCategoryId" id="ApplicationCategoryId" data-bind="source:ApplicationCategoryId" />
        </td>
    </tr>
</table>
</script>

[Ben]

For others that get this error the problem was with the popup editor template. I realised my error while I was reading through http://www.kendoui.com/forums/ui/grid/custom-popup-editor-with-additional-fields.aspx.

Where I had:

<script id="popup_editor" type="text/x-kendo-template">

    <input type="hidden" name="Id" id="Id" data-bind="source:Id">

</script>

I should have written it as:

<script id="popup_editor" type="text/x-kendo-template">

    <input type="hidden" name="Id" id="Id" data-bind="value: Id" data-value-field="Id" />

</script>

The data-bind attribute value should be "value: id", not "source: id", and I needed the extra data-value-field attribute as well.

All the other input controls in the editor template needed to have the same change applied to them. After that the unbind error disappeared :)