I am trying to use tabstrip, the scenario I am trying to do is to
load the first tab which has search form. When user submits the search I
want to open a new tab and load another page into it (that page has
Kendo grid in it). Here is approximate code to do this:
<script>
function addTab(targetUrl, title) {
var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
tabStrip.append({ text: title, encoded: false, contentUrl: targetUrl});
tabStrip.select((tabStrip.tabGroup.children("li").length - 1));
}
function loadDoc() {
var sub_name=document.getElementById("sub_name").value;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("id_type_span").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "pages/getAttributeList.jsp?sub_name="+sub_name, true);
xhttp.send();
}
$(document).ready(
function() {
$("#tabstrip").kendoTabStrip({
animation: {
open: {
effects: "fadeIn"
}
}
});
var tabstrip = $("#tabstrip").data("kendoTabStrip");
tabstrip.tabGroup.on("click", "[data-type='remove']", function(e) {
e.preventDefault();
e.stopPropagation();
var item = $(e.target).closest(".k-item");
tabstrip.remove(item.index());
});
$("#submitButton").click(
function() {
var url = "http://myurl.com/browser/pages/response.jsp?id_type=" + id_type
+ '&id_value=' + id_value + '&sub_name=' + sub_name;
addTab(url, id_type + ': ' + id_value
+ ' <button data-type="remove" class="k-button
k-button-icon"><span class="k-icon
k-i-close"></span></button>')
}
});
});
</script>
<style type="text/css">
<body>
<div id="tabstrip" style="width: 100%;">
<ul>
<li class="k-state-active">Search</li>
</ul>
<div title="Search" >
</div>
</div>
<body>
and the page I call has this:
<body>
<div id="gridBorder">
<div id="grid"></div>
</body>
to which I load grid dynamically.
What happens is the new tab opens and shows the table as it should,
but when I switch to the first tab it still has the search form shrinked
and the same div with grid displaying that is on the second tab, here
is a picture:
http://imgur.com/Drw5nHd
1 Answer, 1 is accepted
In the attached file you will find a modified version of your code, which demonstrates how to add tabs dynamically. Make sure that you run the example on a local web server.
I noticed that in the code sample provided, the TabStrip is incorrectly reinitialized so I changed the code to the following:
var tabStrip = $("#tabstrip").data("kendoTabStrip");This way only the reference to the already existing TabStrip widget is obtained. You can check this documentation article for more information on widget initialization.
Regards,
Dimitar
Progress Telerik