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?
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
0
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.
Here is a sample markup you should aim to generate.
Regards,
Petyo
the Telerik team
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
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
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/
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
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:
In the second case you should omit the data attributes and call .kendoMobileTabStrip by passing the respective configuration options. For example:
Please use the approach that is more convenient for you but to do mix both of them.
Regards,
Alexander Valchev
Telerik
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!