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>

Hi, i'm currently using the treeview component with two levels of checkboxes. I have to invert the selected values of them. My problem is that when I manually change the child check values, they don't trigger their change event so I have call the event handler manually too, that way the parent values don't change either. Is there a way to do this using the treeview object? By the way, I tried using .click() with the child checks, but it made the browser crash.

Thanks for your answers!    

Hi,

I trying to use splitter in my project but it works little wired.

Please see the attachement.

Thank You
Rana

There is one very real scenario that I often encounter and I'm not sure how to approach it with Kendo.

I have a Datasource that has a complex structure, meaning there are nested complex structures, sometimes going 2 levels. Right now I use a regular data source, and display it with a kendo template. When i do chenges i have to "repaint" the template, since the painted template doesnt seem to notice changes in the underlying MVVM bound item. When i reach the nested elements in the template i use javascript for loops to show them all.

It would be nicer to use a nested type of listview or something, but I'm not sure if it's possible or how to achive it?

I'm also not sure if an hierarchical datasource is applyable since from what I understood that should be used when I have to connect more than one API service call, and I do not have that case. I find the hierarchical datasource documentation lacking, and am not sure of all the scenarios where to use it from it. It would be nice if I could define a model and nest another model inside it. Is that possible?

I have set the culture to 'nl-BE' which should display currencies in the '€ 12,34' format. It doesn't however...

Found that applying a row template caused this behaviour.  Worked with column template instead and everything works just fine now.

How can one format the footer of a grid that uses aggregates?  I would like to align text to the right and give the text another color. The correct localization should also be applied.

Found solution by extending the css class .k-footer-template
Regards

Hello

I have next code:
I want to use dataSource var from another view and declared it in global scope. When I use the query method (like so):

dataSource.query({take:12, skip:12});

the AJAX call runs, but in console I get the error:

Does it possible to use  dataSource in this way and how to do it right?

Consider two comboboxes. Box1 and Box2:
- Box2 is cascading from Box1
- Box1 has an optionLabel

It appears to me that Box1 is populating (or attempting to populate) Box2 when the Box1 optionLabel is selected.

This is erroneous.  When Box1 optionLabel gets selected Box2 should be emptied and deactivated.

Hi there,

I'm getting the following error from IE8 when trying to define two Timepickers within a Grid's edit popup window:-

"Object doesn't support this property or method"

The result of this is my change event isn't executing and I can no longer submit the update. The bottom button stops working.

The code I'm using currently looks like this :-
The template (remotely called in) looks like this:-
I've tried a combination of things, syntax changes but nothing seems to remove the error.

IE9 compatibility mode shows the same issue but in normal and other browsers (FF, Chrome, Safari) no problems.

Kendo UI version is v2012.3.1114

Thanks

The page http://docs.kendoui.com/getting-started/web/combobox/cascading has some great FAQ.

One entry is related to work I am doing:
"Q: I am using comboboxes with load on demand (autoBind: false) and I need to pre-set the selected items."

However, the question I have is to related multiple cascades

$("#level1").kendoDropDownList ({ ... });
$("#level2").kendoDropDownList ({ ... cascadeFrom: "level1" ...});
$("#level3").kendoDropDownList ({ ... cascadeFrom: "level2" ...});

Is there a fiddle or example show cascadeFrom working with 2 or more linkages ?
Is the cascading system developed to handle multi-level cascades in the proper serial manner so as to arrive at the states of the following four actions?

Action
1.
level1 optionLabel selected
-> level2 & 3 disabled & emptied,
-> level2 & 3 optionLabel displayed

2.
level1 selected
-> level2 queried using level1
-> level3 disabled & emptied
-> level2 & 3 optionLabel displayed

3.
level2 optionLabel selected
-> level3 disabled & emptied
-> level3 optionLabel displayed

4.
level2 selected
 -> level3 queried using level2
-> level3 optionLabel selected

Thanks,
Richard