How to instantiate declarative widgets within content template

[Gary]

I have a kendo window with the content property set to an object as follows:

content: {
    url: "/api/agent/genealogyupline?agentNumber=" + agentNumber,
    dataType: "json",
    template: kendo.template($("#genealogy-upline-template").html())
 }

The template is defined as follows:

<script type="text/x-kendo-template" id="genealogy-upline-template">
        <div data-role="grid" data-columns='["Level", "AgentName", "Status"]' data-bind="source: data"></div>
</script>

The window opens but the declarative grid widget isn't initialized.  Is there a need to call kendo.init() explicitly after the template is created? If so, I'm not sure how to inject the applicable code.

Thanks,
Gary

[Daniel]

Hello Gary,

Yes, init or bind should be called in order to initialize the Grid because the window just executes the template with the returned data and sets the result as content. Since it seems that the data for the Grid should be taken from the response, you should make a separate Ajax call without using the window and bind the content in the success callback:

var template = kendo.template($("#genealogy-upline-template").html());
$.ajax({
    url: "/api/agent/genealogyupline?agentNumber=" + agentNumber,
    dataType: "json",
    success: function (data) {
        var element = $("#window").kendoWindow({
            content: {
                template: template(data)
            }
        });

        kendo.bind(element, data);
    }
});

Regards,
Daniel
Telerik

[Gary]

Hello Daniel,

I tried the code you provided but it doesn't work. The grid is now instantiated but there are no rows (i.e., no data is bound to it).

Any thoughts?

Thanks,
Gary

[Daniel]

Hello Gary,

Is there a field named "data" in the response that holds the grid data? If not, then you should either create an object with field data that holds the response data or initialize a new ObservableArray from the data and use the "this"  keyword in the source binding definition. I created a small jsFiddle example that demonstrates the first approach.

Regards,
Daniel
Telerik