Dynamically create a TabStrip?

[Thomas]

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?

[Petyo]

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

[Mattijs]

Hi, could you post some sample code to do this i can't get the changed innerhtml to render into a tabstrip.

[Alexander Valchev]

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

[Shawn]

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/

[Alexander Valchev]

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