This is a migrated thread and some comments may be shown as answers.

How to instantiate declarative widgets within content template

3 Answers 136 Views
Window
This is a migrated thread and some comments may be shown as answers.
Gary
Top achievements
Rank 1
Gary asked on 07 Nov 2013, 12:03 AM
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



3 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 08 Nov 2013, 04:32 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Gary
Top achievements
Rank 1
answered on 15 Nov 2013, 05:33 PM
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
0
Daniel
Telerik team
answered on 19 Nov 2013, 11:13 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Window
Asked by
Gary
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Gary
Top achievements
Rank 1
Share this question
or