Kendo UI dynamic tabstrip

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

    Posted 05 Jun 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:

     

    <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. Roman
    Roman avatar
    3 posts
    Member since:
    Jun 2017

    Posted 06 Jun Link to this post

    wrong forum, please ignore
  3. Dimitar
    Admin
    Dimitar avatar
    173 posts

    Posted 07 Jun 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.

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