How to add content to tabstrip at runtime

[monsoon]

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

[Iliana Dyankova]

Hello Winds,

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

• Get the tab content via contentElement() method;
• Use the jQuery html() method to replace the tab inner content.

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

[Aravind]

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.

[Iliana Dyankova]

Hi Aravind,

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

 

 

[n/a]

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.

 

[Iliana Dyankova]

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