Dynamic tabstrip with ajax content

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

    Posted 06 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. Dimitar
    Admin
    Dimitar avatar
    173 posts

    Posted 07 Jun Link to this post

    Hello Roman,

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