Scrolling issue with dynamic tabs

[Claudia]

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!!!

[Ivan Danchev]

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:

<div class="container" style="width: 200px;">
  <div id="tabstrip"></div>
</div>

Let me know whether that works and enables tabs scrolling.

Regards,
Ivan Danchev
Progress Telerik

[Claudia]

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

[Ivan Danchev]

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

[Claudia]

Hi

Still the same I tried and no scroll for me.

[Ivan Danchev]

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

[Claudia]

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

[Ivan Danchev]

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:

createItemSource();
createTabStrip();

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

[Claudia]

Hi

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

Thank you

[Ivan Danchev]

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