Kendo UI dynamic tabstrip

3 posts, 0 answers
  1. Roman
    Roman avatar
    4 posts
    Member since:
    Jun 2017

    Posted 05 Jun 2017 Link to this post

    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:


    function addTab(targetUrl, title) {
    var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
    tabStrip.append({ text: title, encoded: false, contentUrl: targetUrl});"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;
    };"GET", "pages/getAttributeList.jsp?sub_name="+sub_name, true);

    function() {
    animation: {
    open: {
    effects: "fadeIn"

    var tabstrip = $("#tabstrip").data("kendoTabStrip");
    tabstrip.tabGroup.on("click", "[data-type='remove']", function(e) {

    var item = $(".k-item");

    function() {

    var url = ""       + 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>')


    <style type="text/css">

    <div id="tabstrip" style="width: 100%;">
    <li class="k-state-active">Search</li>
    <div title="Search" >





    and the page I call has this:


    <div id="gridBorder">
    <div id="grid"></div>


    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:


  2. Roman
    Roman avatar
    4 posts
    Member since:
    Jun 2017

    Posted 06 Jun 2017 Link to this post

    wrong forum, please ignore
  3. Dimitar
    Dimitar avatar
    301 posts

    Posted 07 Jun 2017 Link to this post

    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.

    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.
Back to Top