Hi,
i'm new using kendo ui ... and i try to use tabstrip (loading content using ajax).
Here's my example:
Really easy ... and works.
I try to add a tab using javascript like this ...
This also seems to work. The new tab will be created and content is loaded.
My Problem occurs when i click on first tab. Then on my page the content of fist tab and second tab is rendered in first tab.
(looked like shown in screenshots).
I try this on IE and Chrome with sameresult.
Head of my html-demo-file ...
Where is my error ?
What i'm doing wrong ?
Regards.
Jürgen Meyer
i'm new using kendo ui ... and i try to use tabstrip (loading content using ajax).
Here's my example:
<
body
>
<
div
id
=
"kub-tabstrip"
>
<
ul
>
<
li
class
=
"k-state-active"
>Willkommen</
li
>
</
ul
>
</
div
>
<
script
type
=
"text/javascript"
>
$(document).ready(function () {
$("#kub-tabstrip").kendoTabStrip({
contentUrls: [
'/Home/WelcomeDisplay'
]
});
});
</
script
>
<
a
href
=
"#"
onclick
=
"addTab()"
>neuer Tab</
a
>
</
body
>
I try to add a tab using javascript like this ...
01.
<
a
href
=
"#"
onclick
=
"addTab()"
>neuer Tab</
a
>
02.
<
script
type
=
"text/javascript"
>
03.
function addTab() {
04.
var tabStrip = $("#kub-tabstrip").kendoTabStrip().data("kendoTabStrip");
05.
tabStrip.append({
06.
text: "neuer Tab",
07.
contentUrl: "/Seminar/Index"
08.
});
09.
var index = tabStrip.tabGroup.children("li").length;
10.
tabStrip.select(index - 1);
11.
}
12.
</
script
>
My Problem occurs when i click on first tab. Then on my page the content of fist tab and second tab is rendered in first tab.
(looked like shown in screenshots).
I try this on IE and Chrome with sameresult.
Head of my html-demo-file ...
01.
<!DOCTYPE html>
02.
<
html
lang
=
"de-DE"
>
03.
<
head
>
04.
<
title
></
title
>
05.
<
link
href
=
"Content/kendo/2012.3.1315/kendo.common.min.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
06.
<
link
href
=
"Content/kendo/2012.3.1315/kendo.silver.min.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
07.
<
script
src
=
"Scripts/kendo/2012.3.1315/jquery.min.js"
type
=
"text/javascript"
></
script
>
08.
<
script
src
=
"Scripts/kendo/2012.3.1315/kendo.web.min.js"
type
=
"text/javascript"
></
script
>
09.
<
script
src
=
"Scripts/kendo/2012.3.1315/cultures/kendo.culture.de-DE.min.js"
type
=
"text/javascript"
></
script
>
10.
</
head
>
What i'm doing wrong ?
Regards.
Jürgen Meyer