title: Kendo TabStrip and Kendo Templates
body: <p>I have to load different KENDO templates dynamically on each tab click of Tabstrip . The datasource for all tabs are same . I am trying to do it as below but its not working . Please advise.(Kendo TabStrip and Kendo Templates)</p>
  
  <pre><code>&lt;div class="tabs-details-wrapper" id="Tab1"&gt;
      &lt;ul&gt;
          &lt;li class="k-state-active" &gt;Identification&lt;/li&gt;
          &lt;li&gt;Planning&lt;/li&gt;
          &lt;li&gt;Implementation&lt;/li&gt;
          &lt;li&gt;Review&lt;/li&gt;
          &lt;li&gt;Management Response&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;div&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-xs-12 col-md-5"&gt;
                  &lt;div class=""&gt;
                      &lt;div class="form-horizontal" &gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;script id="details-templateTab1" type="text/x-kendo-template"&gt;
      &lt;div class="form-group"&gt;
          &lt;label class="col-xs-12 col-md-4 control-label"&gt;Year of Completion&lt;/label&gt;
          &lt;div class="col-xs-12 col-md-8"&gt;
              &lt;span class="control-readonly"&gt;&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;label class="col-xs-12 col-md-4 control-label"&gt;Title&lt;/label&gt;
              &lt;div class="col-xs-12 col-md-8"&gt;
                  &lt;span class="control-readonly"&gt;&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/script&gt;
      &lt;script id="details-templateTab2" type="text/x-kendo-template"&gt;
  
           &lt;div class="form-group"&gt;
                  &lt;label class="col-xs-12 col-md-4 control-label"&gt;Hello1&lt;/label&gt;
                  &lt;div class="col-xs-12 col-md-8"&gt;
                      &lt;span class="control-readonly"&gt;
                      &lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;label class="col-xs-12 col-md-4 control-label"&gt;Title1&lt;/label&gt;
                  &lt;div class="col-xs-12 col-md-8"&gt;
                      &lt;span class="control-readonly"&gt;
                      &lt;/span&gt;
                  &lt;/div&gt;
          &lt;/div&gt;
      &lt;/script&gt;
  
  
  $(".tabs-details-wrapper").kendoTabStrip({
      select: function (e) {
          //var data = this.dataSource.at($(e.item).index());
          var templateSelector = ""
          // alert(e);
          if (e.item.innerText == "Identification") templateSelector = kendo.template($("#details-templateTab1").html())
          else templateSelector = kendo.template($("#details-templateTab2").html()) ;
          // alert(e.contentElement);
  
          //templateSelector = kendo.template($("#details-templateTab1").html());
          $(e.contentElement).html(templateSelector);
          // kendo.bind(e.contentElement, data);
          // $(e.contentElement).html(template(this.dataSource.at($(e.item.innerText).index())))
      },
                     // template: $("#details-templateTab1"),
                      animation: false
                      //dataSource: ds
                     // dataSource: ds,
  });
  </code></pre>