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

Nested template data binding

1 Answer 514 Views

Templates

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

dee asked on 13 Jul 2016, 09:51 PM

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>

<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.mobile.all.min.css" rel="stylesheet" />

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.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>

1 Answer, 1 is accepted

answered on 15 Jul 2016, 03:34 PM

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.