How to instantiate declarative widgets within content template

4 posts, 0 answers
  1. Gary
    Gary avatar
    62 posts
    Member since:
    Sep 2013

    Posted 06 Nov 2013 Link to this post

    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



  2. Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 08 Nov 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Gary
    Gary avatar
    62 posts
    Member since:
    Sep 2013

    Posted 15 Nov 2013 Link to this post

    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
  5. Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 19 Nov 2013 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready