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

tab strips and forms?

8 Answers 947 Views

TabStrip

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

8 Answers, 1 is accepted

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>

</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>

<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

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?

[IMG]http://i91.photobucket.com/albums/k317/savageseb/chrome.jpg[/IMG]<br>[IMG]http://i91.photobucket.com/albums/k317/savageseb/ie9.jpg[/IMG]

<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>

First Tab

</li>

<li>

Second Tab

</li>

</ul>

<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!

answered on 18 Jan 2012, 05:01 PM

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

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!