Kendo TabStrip and Kendo Templates - kendo-tabstrip

Question

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)
<div class="tabs-details-wrapper" id="Tab1">
<ul>
<li class="k-state-active" >Identification</li>
<li>Planning</li>
<li>Implementation</li>
<li>Review</li>
<li>Management Response</li>
</ul>
<div>
<div class="row">
<div class="col-xs-12 col-md-5">
<div class="">
<div class="form-horizontal" ></div>
</div>
</div>
</div>
</div>
</div>
<script id="details-templateTab1" type="text/x-kendo-template">
<div class="form-group">
<label class="col-xs-12 col-md-4 control-label">Year of Completion</label>
<div class="col-xs-12 col-md-8">
<span class="control-readonly"></span>
</div>
</div>
<div class="form-group">
<label class="col-xs-12 col-md-4 control-label">Title</label>
<div class="col-xs-12 col-md-8">
<span class="control-readonly"></span>
</div>
</div>
</script>
<script id="details-templateTab2" type="text/x-kendo-template">
<div class="form-group">
<label class="col-xs-12 col-md-4 control-label">Hello1</label>
<div class="col-xs-12 col-md-8">
<span class="control-readonly">
</span>
</div>
</div>
<div class="form-group">
<label class="col-xs-12 col-md-4 control-label">Title1</label>
<div class="col-xs-12 col-md-8">
<span class="control-readonly">
</span>
</div>
</div>
</script>
$(".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,
});

Answer 1

I have started a jsBin to assist with your issue. When I click each tab it loads content like you desribe. Do you have a datasource javascript object to add to your code?
Need more info, please.
$(".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 // what is your DS?
// dataSource: ds,
});

Answer 2

I think the problem is that in your datasource you are not defining the "dataContentField". Once I added this in conjunction with a datasource I started seeing dynamic results from select function.
Here is my JavaScript
$(".tabs-details-wrapper").kendoTabStrip({
select: function (e) {
var templateSelector = ""
if (e.item.innerText == "Identification") templateSelector = kendo.template($("#details-templateTab1").html())
else templateSelector = kendo.template($("#details-templateTab2").html());
$(e.contentElement).html(templateSelector(this.dataSource.at($(e.item).index())))
},
animation: false,
dataTextField: "Name",
dataContentField: "Content",
dataSource: [
{ Name: "Identification", YearOfCompletion: "1998", Title: "This is first title", Content: "", customMessage: "This is custom message 1" },
{ Name: "Planning", YearOfCompletion: "1999", Title: "This is second title", Content: "", customMessage: "This is custom message 2" },
{ Name: "Implementation", YearOfCompletion: "2000", Title: "This is third title", Content: "", customMessage: "This is custom message 3" },
{ Name: "Review", YearOfCompletion: "2001", Title: "This is fourth title", Content: "", customMessage: "This is custom message 4" },
{ Name: "Management Response", YearOfCompletion: "2002", Title: "This is fifth title", Content: "", customMessage: "This is custom message 5" }
]
});
It didn't really matter what i put in the content property of the dataSource because this is getting replaced on select.
Here is my html
<div class="tabs-details-wrapper" id="Tab1"></div>
<script id="details-templateTab1" type="text/x-kendo-template">
<div class="form-group">
<label class="col-xs-12 col-md-4 control-label">Year of Completion</label>
<div class="col-xs-12 col-md-8">
<span class="control-readonly">#=YearOfCompletion#</span>
</div>
</div>
<div class="form-group">
<label class="col-xs-12 col-md-4 control-label">Title</label>
<div class="col-xs-12 col-md-8">
<span class="control-readonly">#=Title#</span>
</div>
</div>
</script>
<script id="details-templateTab2" type="text/x-kendo-template">
<div class="form-group">
<label class="col-xs-12 col-md-4 control-label">Hello1</label>
<div class="col-xs-12 col-md-8">
<span class="control-readonly">#=customMessage#</span>
</div>
</div>
<div class="form-group">
<label class="col-xs-12 col-md-4 control-label">Title1</label>
<div class="col-xs-12 col-md-8">
<span class="control-readonly">#=Title#</span>
</div>
</div>
</script>
Is this what your looking for?