Nested template data binding

2 posts, 0 answers
  1. dee
    dee avatar
    4 posts
    Member since:
    Jul 2016

    Posted 13 Jul Link to this post

    Please let me know if I am doing something wrong, or if is 2-way data binding possible in the following example - I am trying to put a checkbox inside of the inner template:

    <!DOCTYPE html>
    <html>
    <head>
        <title>KendoUI Test Page</title>
         
     
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    </head>
    <body>
        <div id="home" data-role="view" data-init="onInit">
            <ul id="list"></ul>
        </div>
     
        <script id="item-template" type="text/x-kendo-template">
            <div>#: foo #</div>
            #= kendo.render(kendo.template($("\\#user-template").html()), [user]) #
        </script>
     
        <script id="user-template" type="text/x-kendo-template">
            <div style="color: red;">
                <span>#= isDefault#</span>
                <span><input type="checkbox" data-bind="checked:isDefault" id="chkTest" /></span>
            </div>
             
        </script>
         
        <script>
            var app = new kendo.mobile.Application();
            function onInit(e) {
                $("#list").kendoMobileListView({
                    dataSource: {
                        data: [
                            {foo: "record1", user: { name: "John", age: 23, isDefault: true}},
                            {foo: "record2", user: { name: "Jane", age: 23, isDefault: false } },
                            {foo: "record3", user: { name: "Jack", age: 13, isDefault:false } }
                        ]
                    },
                    appendOnRefresh: true,
                    template: $("#item-template").html()
                });
            }
        </script>
    </body>
    </html>

  2. Stefan
    Admin
    Stefan avatar
    264 posts

    Posted 15 Jul Link to this post

    Hello Dee,

    The two-way binding can be achieved only with MVVM using a kendo.observable. MVVM binding cannot be acheived directly with a specific item from a Kendo UI DataSource.

    Please check our examples of Kendo UI Mobile ListView with editing and with MVVM binding:

    http://demos.telerik.com/kendo-ui/m/index#mobile-listview/editing
    http://demos.telerik.com/kendo-ui/m/index#mobile-listview/mvvm

    In addition, please check the information about the integration between Kendo UI Mobile and MVVM:

    http://docs.telerik.com/kendo-ui/controls/hybrid/support/mvvm

    Let me know if you need additional information on this matter.

    Regards,
    Stefan
    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
  3. Kendo UI is VS 2017 Ready
Back to Top