How to add content to tabstrip at runtime

6 posts, 0 answers
  1. monsoon
    monsoon avatar
    10 posts
    Member since:
    Jun 2013

    Posted 22 Jul 2013 Link to this post

    Hi,
    How to add content (Grid Data) to the Tabstrip dynamically  at runtime.
    My code looks like,

    <div id="tabstrip">
    <ul>
    <li class="k-state-active">Dimensions </li>
    </ul>
    <div><div id="Grid"></div>
    </div>
    ..

    // I am creating the grid dynamically  using a function call.I am successful with creating grid data.I need to insert this into Tabstrip.
    function createGrid (ElementId){
     $("#"+ElementId).kendoGrid(scrollable : true,height : 300,toolbar:...columns : [{..},{..}]);....
    }

    //I need to call a function to run tabstrip at runtime ..I end up with tabs but with not containing Data(Grid Data) within it.
    function createTabstrip(){
    $("#tabstrip").kendoTabStrip({   animation:  { open: { effects: "" } }});
    }


    My goal is to  insert the Grid Data into the tabstrip at runtime..pls help me with any suggestions and  sample codes.

     I am using kendu web and Framework only..

    Thanks in Advance,
    Winds
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 24 Jul 2013 Link to this post

    Hello Winds,

    In order to replace the tab content I can suggest you the following approach:

    //get reference to the TabStrip widget
    var ts = $("#tabstrip").data("kendoTabStrip");
    //get the first tab content
    var item = ts.contentElement(0);
    //replace the first tab content
    $(item).html($("#grid"));

    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Aravind
    Aravind avatar
    21 posts
    Member since:
    Oct 2015

    Posted 06 Nov 2015 in reply to Iliana Nikolova Link to this post

    Hi Iliana,

     

    Is it possible to display the contents of a div already created using Kendo Grid when a new tab is created dynamically?

    http://dojo.telerik.com/UVoNA

     

    Here, in this, when i hardcode the div, its content is displayed, but when on appending, a new div with the same class name is created, but it is not getting the class names.

     

    Can you please tell me the solution for this??

     

    When i click append, it should create a new tab with that previously created div content on load.

  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 10 Nov 2015 Link to this post

    Hi Aravind,

    For this scenario I would suggest initializing the Grid in the TabStrip activate event. As an example: 
    //....
    var tabStrip = $("#tabstrip").kendoTabStrip({
      activate: function(){
          //....
         var grid = $(".stocks_tbl").kendoGrid({
          //.....
         }).data("kendoGrid");
      }
    }).data("kendoTabStrip");

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. shan
    shan avatar
    3 posts
    Member since:
    Apr 2016

    Posted 16 May Link to this post

    Hi, I have been trying to make these suggestions work but still not seeing the grids.Here's how I am trying to go about it.

    First, I had three grids with same column schema but different datasource.So I loaded everything together in the same html page with 3 divs initialized as 3 grids.Now I want all the three grids to be placed inside their respective tabs.All the three grids can be loaded at once like i did it initially with the html page or it can be loaded on demand based on the active tab.

    Can you please provide me examples for loading multiple grids with remote datasource into multiple tabs when the tab is initialized and also based on active tabs.

     

  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 19 May Link to this post

    Hi Shan,

    Take a look at the following dojo which demonstrates how to load multiple grids into multiple tabs:
    http://dojo.telerik.com/@Iliana/IkUWo

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready