CODEWITHSUNDEEP
kendo-uikendo-mvvmkendo-listview
Dmytro Rudenko
Dmytro Rudenko

Reputation: 2524

MVVM databinding inside Kendo ListView template

In my listview template I want to use some databound elements. For example I have next template:

<script type="text/x-kendo-tmpl" id="phoneView">
<div style="width:301px">
   <span style="width:100px" data-role="tooltip" data-position="top" data-bind="val: tooltips.phoneNumber"><input type="text" data-bind="value: number" /></span>
   <span style="width:45px" data-role="tooltip" data-position="top" data-bind="val: tooltips.phoneExt"><input type="text" data-bind="value: ext" /></span>
   <span data-role="tooltip" data-position="top" data-bind="val: tooltips.removePhone"><a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span> Delete</a></span>
</div>
</script>

for listview 

<div data-role="listview" id="phones"
   data-template="phoneView"
   data-bind="source: phones"></div>

when I bound data to form this listview shows rows with empty textboxes without data for each row in phones source and no tooltips.

But if I start editing some row by (for example) next code:

var listView = $("#phones").data("kendoListView");
listView.edit(listView.element.children().first());

Then edited row works perfectly.

So my question is - Is this possible to use MVVM data binding inside "view" list view templates in this case?

Upvotes: 1

Views: 2440

Answers (1)

Atanas Korchev
Atanas Korchev

Reputation: 30671

There is no binding called "val" hence the problem. There should even be an exception thrown. The following should work though:

  <script type="text/x-kendo-tmpl" id="phoneView">
    <div style="width:301px">
       <span data-role="tooltip" data-filter="input"><input type="text" data-bind="value: number, attr: {title:tooltips.phone}" /></span>
       <span data-role="tooltip" data-filter="input">
       <input  type="text" data-bind="value: ext,attr:{title:tooltips.ext}" />
       </span>
       <a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span> Delete</a>
    </div>
 </script>

Here is a live demo: http://trykendoui.telerik.com/@korchev/IGIJ

Upvotes: 2

Related Questions