CODEWITHSUNDEEP
kendo-ui
Vahe
Vahe

Reputation: 1841

Kendo UI - How do I modify a Kendo template in JavaScript

I am trying to modify a Kendo UI template at runtime in JavaScript.

My template contains a '103' (second line) which I want to dynamically change within JavaScript. 

<script type="text/x-kendo-tmpl" id="srcBldgTemplate">
     #if(data.BuildingName == '103'){#
        <div  class="item click" data="${BuildingID}">
            <input id=chkSrcBldgMain type="checkbox" class="click" checked="true"  onclick="filterDataSrcBldg(this,'SrcBuildingID');" />
            <span class="checkbox">#:BuildingName#</span>
        </div>
    #}else{#
    <div class="item click" data="${BuildingID}">
        <input type="checkbox" class="click"  onclick="filterDataSrcBldg(this,'SrcBuildingID');" />
        <span class="checkbox">#:BuildingName#</span>
    </div>
    #}#       
</script>

The code I use to modify works to replace the element's html.

$("#srcBldgTemplate").html().replace('103', $(currChkBldg).next().html());

However, when I run an alert afterwards on $("#srcBldgTemplate").html(), I keep getting 103 in the template instead of the new value.

How do I dynamically change the template and use the updated template value when Kendo reloads the template?

Upvotes: 0

Views: 2193

Answers (1)

gitsitgo
gitsitgo

Reputation: 6769

Your problem is that .html() is a GET method. It only gets a copy of your template, so when you replace the value, it changes the copy instance but not the original value.

In order to SET the new template, you have to use .html(htmlString)

So do something like this:

var newTemplate = $("#srcBldgTemplate").html().replace('103', $(currChkBldg).next().html());
$("#srcBldgTemplate").html(newTemplate);

Get and replace the template, store it in a temp variable. Then you can set that temp variable as the new template.

Upvotes: 1

Related Questions