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

Dynamically create a TabStrip?

5 Answers 272 Views
TabStrip (Mobile)
This is a migrated thread and some comments may be shown as answers.
Thomas
Top achievements
Rank 1
Thomas asked on 07 Feb 2012, 10:40 PM
Hi,

I can't find how to create a TabStrip dynamically with Kendo UI Mobile. I don't care if I have to create <li> with jQuery and then call kendoMobileTabStrip() :) But even that don't work, I'm not sur this function exists in fact.

Any advice?

5 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 08 Feb 2012, 08:55 AM
Hi,

Dynamic creation of the mobile tabstrip widget is not supported out of the box. However, the approach you describe should work in theory. One thing to notice - the tabstrip does not have any UL/LI elements.

<div data-role="tabstrip">
  <a href="#index">Home</a>
  <a href="#featured">Featured</a>
</div>
  
Here is a sample markup you should aim to generate.

Regards,
Petyo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Mattijs
Top achievements
Rank 1
answered on 04 Apr 2012, 11:51 PM
Hi, could you post some sample code to do this i can't get the changed innerhtml to render into a tabstrip.
0
Alexander Valchev
Telerik team
answered on 09 Apr 2012, 08:00 AM
Hi Mattijs,

Please check this jsFiddle example - basically all you need to do is to append the tabstrip html and call kendoMobileTabStrip() with a jQuery selected element.

Greetings,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Shawn
Top achievements
Rank 2
answered on 09 Jul 2014, 06:46 PM
This has been very helpful, but I am having a problem with the sample provided and have modified the code a little to demonstrate my issue.

1. I put in some code to remove the previous tab strip so they don't stack up on one another.

2. I use it a little different in that I do not link to a href, but trap the data-select events and have modified the code.

The problem is that the data-select event is not firing after I add this dynamically.  Other than that this works great.

So I need some help in understanding why this data-select is not calling the function specified.

Here is jsfiddle link

http://jsfiddle.net/8J7VU/


0
Alexander Valchev
Telerik team
answered on 14 Jul 2014, 11:15 AM
Hello Shawn,

The event is not firing because you are trying to use mixed initialization which is not supported. You should initialize and configure the widget either via data attributes or via JavaScript.

In the first case you should set all options and the data-role and call kendo.init. For example:
var html = '<div id="myTabStrip" data-role="tabstrip" data-select="tabSelect"><a data-icon="action">Profile</a><a data-icon="rewind">Sales</a><a data-icon="favorites">Rating</a></div>';
 
function makeTabStrip() { 
    $("#myTabStrip").remove();
    $("#footer").append(html);
    kendo.init($("#myTabStrip"), kendo.mobile.ui);
}

In the second case you should omit the data attributes and call .kendoMobileTabStrip by passing the respective configuration options. For example:
var html = '<div id="myTabStrip"><a data-icon="action">Profile</a><a data-icon="rewind">Sales</a><a data-icon="favorites">Rating</a></div>';
 
function makeTabStrip() { 
    $("#myTabStrip").remove();
    $("#footer").append(html);
    $("#myTabStrip").kendoMobileTabStrip({
        select: tabSelect
    });
}

Please use the approach that is more convenient for you but to do mix both of them.

Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
TabStrip (Mobile)
Asked by
Thomas
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Mattijs
Top achievements
Rank 1
Alexander Valchev
Telerik team
Shawn
Top achievements
Rank 2
Share this question
or