KendoUI - Remote Databinding Fails within "kendoWindow"

Question

I made this topic once, but the information I had was a bit hard to follow and I did not get much help, so I am trying again after spending the day making a JSBIN sample.

I have a situation where I am using KendoUI to make a view model, and also to make some items within it, and when you click on sub-items that are drawn, it opens up a KendoWindow to let you edit them more specifically.

However, there is a problem with the dataSource concept, I think. When I try to bind to a dataSource on my page it works fine; But when I try to bind a kendo control to a remote datasource within a rendered window, it refuses to fetch.

If I bind only to local data, hard coded data, it works; So I know the dropdownlist is working. But I really need to be able to bind to remote data.

I have prepared a JSBIN to show this behavior (or lack thereof)

JSBIN EXAMPLE

Any help would be greatly appreciated. To see the behavior, click on the button to Create Socket Rail, then use the NumericTextBox to increase the size to any number higher than 0, then click on one of the drawn boxes.

Answer 1

You need to create the kendoDropDownList in the kendoWindow.activate event (or at least bind the DataSource there). Adapted from your code, this will work:

kendoWindowWidget = function (options) {
    // extend the settings options so that we can take
    // explicit configuration from the widget caller.
    var settings = $.extend({
        resizable: false,
        modal: true,
        viewable: true,
        visible: false,
        width: "450px",
        height: "450px",
        activate: function () {
            var myDataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        dataType: "json",
                        url: "http://jsbin.com/UYEbOXi/3/js"
                    }
                }
            });
            widgets.windows.sockets.type = $('#socket-type').kendoDropDownList({
                dataTextField: "Name",
                dataValueField: "Id",
                dataSource: myDataSource
            }).data("kendoDropDownList");
        }
    }, options);

    var $window = $("<div id='kendow-editor-window'/>")
        .kendoWindow(settings)
        .data("kendoWindow");

    $window.databind = function (e) {
        kendo.bind($window.element, e);
        $window.open().center();
    };

    // return the created combo box
    return $window;
};

Adapted JSBin (I removed a bunch of things to make it easier to manage): http://jsbin.com/uMuFewI/3/edit