Hi

I have a TabStrips that gets the tabs from external source (dynamic) and the scrollable property is not working for me. Here is part of the code, I will appreciate any help.

$("#tabstrip").kendoTabStrip({
tabPosition: "top",
scrollable: true,
dataTextField: "ItemId",
dataContentUrlField: "ItemUrl",
dataSource: dataSourceItem
dataBound: function () {
var tabStrip = $("#tabstrip").data("kendoTabStrip");
tabStrip.select(0);
},
activate: onItemSelect,
});

Thank you!!!

Hi

Still the same I tried and no scroll for me.

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

Hi

It is working now I used the requestEnd event and the scroll is there

Thank you