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

Kendo MVVM Template - Not binding Correctly

3 Answers 275 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Rahul
Top achievements
Rank 1
Rahul asked on 27 Feb 2020, 05:01 PM

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/

3 Answers, 1 is accepted

Sort by
0
Accepted
Aleksandar
Telerik team
answered on 02 Mar 2020, 11:58 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Rahul
Top achievements
Rank 1
commented on 03 Dec 2021, 11:27 PM

Thank you!
0
Pistle
Top achievements
Rank 1
Veteran
answered on 05 Oct 2020, 12:18 PM

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.

0
Aleksandar
Telerik team
answered on 07 Oct 2020, 09:18 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
General Discussions
Asked by
Rahul
Top achievements
Rank 1
Answers by
Aleksandar
Telerik team
Pistle
Top achievements
Rank 1
Veteran
Share this question
or