sure here is what I have
<div id="tabContiner" style="width:700px">
<div id="tabstrip"></div>
</div>
function createTabStrip() {
$("#tabstrip").kendoTabStrip({
tabPosition: "top",
scrollable: true,
dataTextField: "ItemId",
dataContentUrlField:"ItemtId",
dataSource: dataSourceItem,
dataBound: function () {
var tabStrip = $("#tabstrip").data("kendoTabStrip");
tabStrip.select(0);
},
select: function (e) {
var template = kendo.template($("#template").html());
$(e.contentElement).html(template(this.dataSource.at($(e.item).index())));
}
});
}
function createItemSource() {
dataSourceItem = new kendo.data.DataSource({
transport: {
read: {
url: baseUrl + "/api/EPDApi/GetItems/",
dataType: "json",
type: "POST"
},
parameterMap: function (data, type) {
var result = {
provId: currProvId,
lob: currLob,
source: currSource,
}
return kendo.stringify(result);
}
},
});
}
this is the json (dataSourceItem) I get from API:
[
{
"ItemId": "1258473254363543684384357",
"ItemName": "",
"ItemDescrip": "",
},
{
"ItemId": "246876249665454354574354",
"ItemName": "",
"ItemDescrip": "",
},
{
"ItemId": "356468436574685435435",
"ItemName": "",
"ItemDescrip": "",
},
{
"ItemId": "7896212448975113354576",
"ItemName": "",
"ItemDescrip": "",
},
{
"ItemId": "96114785112221258427854",
"ItemName": "",
"ItemDescrip": "",
}
]
//change event of a different control (listview)
function onChange() {
var data = dataSourceLob.view(),
selected = $.map(this.select(), function (item) {
currLob = data[$(item).index()].LOB;
});
if (itemSourceCreated === false) {
createItemSource();
createTabStrip();
itemSourceCreated = true;
}
else
dataSourceItem.read();
var tabStrip = $("#tabstrip").data("kendoTabStrip");
tabStrip.select(0);
}
that's what I have and the tabstrips shows like the attachment
Thank you