Kendo MVVM Template - Not binding Correctly

[Rahul]

Hi,

 

I am trying to bind kendo template with MVVM but unfortunately facing some weird issue. My JSON looks correct but the template is binding the data incorrectly. What's interesting is if I comment either Dropdown or Span, the other control works perfectly. I tried assigning a unique Ids to control but it's not helping. Could you please check below fiddle?

 

http://jsfiddle.net/rahulsingii/5nzcruk3/8/

[Aleksandar]

Hi Rahul,

To resolve the issue wrap the contents of the template in a div element:

<script id="TestTemplate" type="text/x-kendo-template">
<div>
    <div>
        <span id="txtCategory-${uid}" data-bind="text: categoryText"></span>
     </div> 
     <div>
           <select id="ddlTest-${uid}"
           data-role="dropdownlist"
           data-text-field="Text"
           data-value-field="Value"
           data-bind="source: myoptions, value:sourceTypeId"></select>
      </div>
 </div>
</script>

This is required as the template can have only one root element. Here is a dojo that shows the above suggestion implemented.

Regards,
Aleksandar
Progress Telerik

[Rahul]

Thank you!

[Pistle]

Enclose the template content inside a div tag to fix the issue:

<script id="issue-detail-template" class="issue-detail-template" type="text/x-kendo-template"><div><span data-bind="text : Name"></span><div data-template="issue-group-detail-template" data-bind="source:IssueGroups"></div></div></script>

This gives the template content a single root element and the templating process then works correctly. Exactly as to why, I cannot say, other than this is simply a quirk/shortcoming to be aware of.

[Aleksandar]

Hi Pistle,

Indeed having two first-level DOM elements results in erratic behavior and is not supported. You can find additional details on source binding when using MVVM in the documentation section linked below:

https://docs.telerik.com/kendo-ui/framework/mvvm/bindings/source#source-binding-to-root-elements

Regards,

Aleksandar
Progress Telerik