title: KendoUI Data source Template
body: <p>I write a template for my kendoUI DataSource like this:</p>
  
  <pre><code>&lt;script id="SmallGalleryTemplate" type="text/x-kendo-template"&gt;
  
  
  
             &lt;div style="width: 30%; float:left; margin-left: 55px; margin-bottom: 5%; margin-right: 8%"&gt;
                      &lt;h4 class="p2"&gt;#= Name =&lt;/h4&gt;
                      &lt;figure&gt;
                          &lt;a href=ProductDetail.aspx?id=#= ID #&gt;
                              &lt;img class="img-border" src="images/Product/#= img #"/&gt;&lt;/a&gt;
                      &lt;/figure&gt;
                      &lt;div class="box"&gt;
                          &lt;div class="padding"&gt;
                              &lt;a href=ProductDetail.aspx?id=#= ID #&gt;Read more&lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
              &lt;/div&gt;
  
      &lt;/script&gt;
  </code></pre>
  
  <p>and I have :</p>
  
  <pre><code>  &lt;script&gt;
  
          $(document).ready(function () {
  
              var template = kendo.template($("#SmallGalleryTemplate").html());
  
              var datas = function () {
  
                  var objects = [];
                  $.ajax({
                      type: "POST",
                      url: "./Product.aspx/ProductGetAll",
                      data: {},
                      async: false,
                      contentType: "application/json; charset=utf-8",
                      dataType: "json",
                      success:
                          function (response) {
  
                              for (var i = 0; i &lt; response.d.length; i++) {
  
                                  objects.push({ 'ID': response.d[i].PRODUCT_ID, 'img': response.d[i].PRODUCT_PHOTO_PATH, 'Name': response.d[i].PRODUCT_NAME });
  
                              }
                          },
  
                  });
                  return objects;
              };
  
  
              var dataSource = new kendo.data.DataSource({
                  data: datas(),
  
                  change: function () {
                      $("#SmallGalleryInner").html(kendo.render(template, this.view()));
                  }
              });
  
  
              dataSource.read();
  
  
          });
  
      &lt;/script&gt;
  </code></pre>
  
  <p>but it does not work and give me an error :</p>
  
  <blockquote>
    <p>Microsoft JScript runtime error: Invalid template</p>
  </blockquote>
  
  <p>what is the problem?</p>
  
  <p>NOTE:ProductGetAll() method give me a list of data.</p>