Hi Claudia,

For the scrollable tabs functionality to work the TabStrip's width must exceed that of its container, for example if you place the element you initialize the widget from in a container with specified width:

Let me know whether that works and enables tabs scrolling.

Regards,
Ivan Danchev
Progress Telerik

Still no working. I kind of wired because one time I opened and the scroll was there but not any more and I didn't change anything in between. I attached an image of my tabstrip

Hi Claudia,

Here's a dojo example that is based on the code snippet you posted. As you can see the TabStrip is in a container with fixed width and at my end scrolling works as expected in IE, Firefox and Chrome. Please give the example a try, modify it accordingly so that the issue with the scrollable tabs functionality you are experiencing is reproduced and link it back for further review.

Regards,
Ivan Danchev
Progress Telerik

Hi

Still the same I tried and no scroll for me.

Hi Claudia,

If you have tried the approach shown in the dojo and it didn't work, what is the difference between your page and the one in the dojo? Could you modify the linked example or post another one that demonstrates the issue?

Regards,
Ivan Danchev
Progress Telerik

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 Claudia,

Even with the data you posted the TabStrip does trigger its scrolling functionality: see this dojo. The problem could be in the onChange handler in creating the dataSource and the TabStrip in a quick succession:

and since the dataSource uses remote data it takes time for the data to be loaded. Instead of creating the TabStrip after calling the createItemSource function you could try creating it in the dataSource's requestEnd event handler.

Regards,
Ivan Danchev
Progress Telerik

Hi

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

Thank you

Hi Claudia,

I am glad initializing the TabStrip in the dataSource's requestEnd event worked out. This confirms that the issue was related to the widget being initialized while the data in its dataSource was still being loaded.

Regards,
Ivan Danchev
Progress Telerik