This is a migrated thread and some comments may be shown as answers.

Scrolling issue with dynamic tabs

9 Answers 106 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Claudia
Top achievements
Rank 1
Claudia asked on 16 Apr 2018, 06:35 PM

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

9 Answers, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 18 Apr 2018, 11:34 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Claudia
Top achievements
Rank 1
answered on 20 Apr 2018, 01:29 PM
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
0
Ivan Danchev
Telerik team
answered on 23 Apr 2018, 12:47 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Claudia
Top achievements
Rank 1
answered on 24 Apr 2018, 01:37 PM

Hi

Still the same I tried and no scroll for me.

0
Ivan Danchev
Telerik team
answered on 25 Apr 2018, 02:07 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Claudia
Top achievements
Rank 1
answered on 25 Apr 2018, 03:44 PM

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

0
Accepted
Ivan Danchev
Telerik team
answered on 27 Apr 2018, 12:41 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Claudia
Top achievements
Rank 1
answered on 27 Apr 2018, 02:41 PM

Hi

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

Thank you

0
Ivan Danchev
Telerik team
answered on 01 May 2018, 09:43 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
TabStrip
Asked by
Claudia
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Claudia
Top achievements
Rank 1
Share this question
or