[SOLVED] Kendo template not working

Kendo template not working

My Javascript

(function () {
    var viewModel = kendo.observable({
        dataEntryStyle : "block",
        productsDatasource: new kendo.data.DataSource({       
        })
    });    
    kendo.bind($("#consumable"), viewModel);

})();

Html -

<script type="text/x-kendo-template" id="testTemplate">
       <span data-bind="text: dataEntryStyle"></span>
</script>

<div id="consumable" data-template="testTemplate"></div>

This template does not seem to work, I expect to see "block" as output but its blank.

Solution

Bind the source to HTML element

(function() {
  var viewModel = kendo.observable({
    dataEntryStyle: "block",
    productsDatasource: new kendo.data.DataSource({})
  });
  kendo.bind($("#consumable"), viewModel);

})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>


<div id="consumable" data-template="testTemplate" data-bind="source:dataEntryStyle"></div>

<script type="text/x-kendo-template" id="testTemplate">
  <span data-bind="text: dataEntryStyle"></span>
</script>