Hey guys,
having fun with kendo and jquery, learning and stuff.
i tried pulling up a html form within tab strips, and quickly found they dont work, or at least not to me.
is it possible to make this work, or would it be asking too much.
thanks in advanced
having fun with kendo and jquery, learning and stuff.
i tried pulling up a html form within tab strips, and quickly found they dont work, or at least not to me.
is it possible to make this work, or would it be asking too much.
thanks in advanced
8 Answers, 1 is accepted
0
Hi Sebastian,
I wasn't able to reproduce your issue by simply adding a form in the TabStrip and submitting it. Can you provide some sample code so I can check what is happening?
Best wishes,
Kamen Bundev
the Telerik team
I wasn't able to reproduce your issue by simply adding a form in the TabStrip and submitting it. Can you provide some sample code so I can check what is happening?
Best wishes,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0

sebastian
Top achievements
Rank 1
answered on 18 Nov 2011, 01:34 PM
<html>
<head>
<link href=
"Kendo/styles/kendo.common.min.css"
rel=
"stylesheet"
/>
<link href=
"Kendo/styles/kendo.kendo.min.css"
rel=
"stylesheet"
/>
<script language=
"javascript"
src=
"jquery-1.6.4.js"
></script>
<script language=
"javascript"
src=
"Kendo/js/kendo.all.min.js"
></script>
<!--<script type=
"text/javascript"
src=
"jquery.maskedinput-1.3.js"
></script>!-->
</head>
<div id=
"example"
class
=
"k-content"
>
<div id=
"tabstrip"
>
<ul>
<li
class
=
"k-state-active"
>
First Tab
</li>
<li>
Second Tab
</li>
</ul>
<div>
</div>
<div>
</div>
</div>
<script>
$(document).ready(
function
() {
$(
"#tabstrip"
).kendoTabStrip({
contentUrls: [
'agregarViajes.php'
, null ]
});
});
</script>
</div>
</html>
agregarViajes.php is the form im trying to load into tabstrips.
edit:
ok,i got it to work fine on firefox and ie8, however it doesnt on chrome. had some syntax issues
btw, is there a way to submit the form and keep processing it, and loading other pages within tabstrips.
thanks a bunch
0
Hello Sebastian,
You can use either jQuery $.ajax() calls to send the data and process it back or use an iframe, but it will reload at the same place.
Greetings,
Kamen Bundev
the Telerik team
You can use either jQuery $.ajax() calls to send the data and process it back or use an iframe, but it will reload at the same place.
Greetings,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0

sebastian
Top achievements
Rank 1
answered on 26 Nov 2011, 01:33 AM
thanks for the replies kamen,
however just when i thought i had it done, i got pulled back down,
currently on firefox i cant display the code listed above. i cant figure out why it just stopped.
i swicthed to ie9, and it works but they are not tabs, as Marcus posted on his thread below mine.
what am i missing?
however just when i thought i had it done, i got pulled back down,
currently on firefox i cant display the code listed above. i cant figure out why it just stopped.
i swicthed to ie9, and it works but they are not tabs, as Marcus posted on his thread below mine.
what am i missing?
0
Hello Sebastian,
I'm not sure what do you mean by "they are not tabs". Can you post an updated code sample and describe the steps to reproduce your problem? Are there any errors reported in Firebug or IE9 console?
Best wishes,
Kamen Bundev
the Telerik team
I'm not sure what do you mean by "they are not tabs". Can you post an updated code sample and describe the steps to reproduce your problem? Are there any errors reported in Firebug or IE9 console?
Best wishes,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0

sebastian
Top achievements
Rank 1
answered on 07 Dec 2011, 05:32 PM
ok , so since tabstrips went ballistic on me i havent done much else with it. im putting my tester cap on, and resuming, cause i really love combox and other widgets.
these are a few things i have so far.
1. Fill form button selects tab, tab gets selected, but the select option/function does not load.
2. tabs look weird, no matter what browser i use, either in my home cpu or others.
3. at least ie9 loads the contentUrl specified, ff and chrome fail on me.
4. how would i go about processing .ajax() calls to fill out the form?
hope my noob questions arent much of a bother,
i eagerly await your answer kamen!
these are a few things i have so far.
1. Fill form button selects tab, tab gets selected, but the select option/function does not load.
2. tabs look weird, no matter what browser i use, either in my home cpu or others.
3. at least ie9 loads the contentUrl specified, ff and chrome fail on me.
4. how would i go about processing .ajax() calls to fill out the form?
<
td
> <
input
name
=
"seleccionCliente1"
id
=
"seleccionCliente1"
/></
td
>
<
script
>
var data =[<?
php
echo $searchbox1; ?>];
$("#seleccionCliente1").kendoAutoComplete({
dataSource: data,
change: function(){
var autocomplete = $("#seleccionCliente1").data("kendoAutoComplete");
//window.location = "/mensajeria/mensajeriamain.php?value="+ autocomplete.value();
}
});
</
script
>
<
div
id
=
"example"
class
=
"k-content"
>
<
div
id
=
"tabstrip"
>
<
ul
>
<
li
>
<!--class="k-state-active"-->
First Tab
</
li
>
<
li
>
Second Tab
</
li
>
</
ul
>
<
div
>
</
div
>
<
div
>
</
div
>
</
div
>
<
script
>
$(document).ready(function() {
function onselect(){
alert('checking on Fill Button');
};
function onload(){
};
$("#tabstrip").kendoTabStrip({
select: onselect,
contentLoad: onload,
collapsible: true,
contentUrls: ['agregarViajes.php' , null]
});
});
</
script
>
</
div
>
<
button
id
=
"Fill"
class
=
"k-button"
>Fill Form</
button
>
<
script
>
$('#Fill').live('click', function(){
var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
tabstrip.select(tabstrip.tabGroup.children("li:first"));
});
</
script
>
</
html
>
hope my noob questions arent much of a bother,
i eagerly await your answer kamen!
0

Bob
Top achievements
Rank 1
answered on 14 Jan 2012, 04:47 PM
i also have a problem with the KendoUI tabs ... on IE9.0.8.. Exact same code works fine on FireFox 9.0.1, and Chrome 16.0.912
on IE9, the tabs render vertically, looking almost like a malfunctioning accordion.
Please advise ...
on IE9, the tabs render vertically, looking almost like a malfunctioning accordion.
Please advise ...
0
Hi Sebastian,
1. Seems the missing select event is a bug. I've fixed it and the fix will be available with the service pack. I've also updated you points for finding it. As a workaround, add this code first after the Kendo scripts:
kendo.ui.TabStrip.prototype.select = function (element) {
var that = this;
if (arguments.length == 0) {
return that.element.find("li.k-state-active");
}
$(element).each(function (index, item) {
item = $(item);
if (!item.hasClass("k-state-active") && !that.trigger("select", { item: item[0], contentElement: that.contentElement(item.index()) })) {
that.activateTab(item);
}
});
return that;
};
Please also don't reinitialize the TabStrip on every button click or this won't work, e.g. use something like this:
$('#Fill').live('click', function(){
var tabstrip = $("#tabstrip").data("kendoTabStrip");
tabstrip.select(tabstrip.tabGroup.children("li:first"));
});
2. and @Bob - Kendo UI doesn't support Quirksmode, you need to set your doctype or you will experience all kinds of issues due to IE's old 5.5 engine that handles Quirksmode.
3. Can you provide a live sample where we can reproduce the non-loading content issue?
4. Check the jQuery documentation about its syntax and usage.
All the best,
Kamen Bundev
the Telerik team
1. Seems the missing select event is a bug. I've fixed it and the fix will be available with the service pack. I've also updated you points for finding it. As a workaround, add this code first after the Kendo scripts:
kendo.ui.TabStrip.prototype.select = function (element) {
var that = this;
if (arguments.length == 0) {
return that.element.find("li.k-state-active");
}
$(element).each(function (index, item) {
item = $(item);
if (!item.hasClass("k-state-active") && !that.trigger("select", { item: item[0], contentElement: that.contentElement(item.index()) })) {
that.activateTab(item);
}
});
return that;
};
Please also don't reinitialize the TabStrip on every button click or this won't work, e.g. use something like this:
$('#Fill').live('click', function(){
var tabstrip = $("#tabstrip").data("kendoTabStrip");
tabstrip.select(tabstrip.tabGroup.children("li:first"));
});
2. and @Bob - Kendo UI doesn't support Quirksmode, you need to set your doctype or you will experience all kinds of issues due to IE's old 5.5 engine that handles Quirksmode.
3. Can you provide a live sample where we can reproduce the non-loading content issue?
4. Check the jQuery documentation about its syntax and usage.
All the best,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!