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

Kendo UI dynamic tabstrip

2 Answers 72 Views
Map
This is a migrated thread and some comments may be shown as answers.
Roman
Top achievements
Rank 1
Roman asked on 05 Jun 2017, 08:53 PM

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

 

2 Answers, 1 is accepted

Sort by
0
Roman
Top achievements
Rank 1
answered on 06 Jun 2017, 03:08 PM
wrong forum, please ignore
0
Dimitar
Telerik team
answered on 07 Jun 2017, 11:46 AM
Hello Roman,

I have provided an answer in your other TabStrip forum thread and we can continue our communication there in order to prevent thread duplication.

Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Map
Asked by
Roman
Top achievements
Rank 1
Answers by
Roman
Top achievements
Rank 1
Dimitar
Telerik team
Share this question
or