KendoUI: How to insert TreeView inside the TabStrip at run time

Question

I need to add a tree view inside the tabstrip. My scenario is that upon click of a button, I get some data like below. I need to generate 1 tab per report and put a treeview for the Data inside the tab. Is this possible? If yes, can you please let me know how to do this? I very much appreciate your help.

JSON Data:

[ 
  Report 1: {  Data: [   ] }, 
  Report 2: {  Data: [  ] } 
]

Thank you.

Answer 1

I'm going to propose a little transformation to your JSON so it would look like this:

[
    { Id : "Report 1", Data: [ ] }, 
    { Id : "Report 2", Data: [ ] } 
]

Where Id is the text that we want to show a label for the tab and Data is the content of the tree.

Start adding an initial (empty) content to each tab.

$.each(data, function(idx, elem) {
    elem.Content = "<div>hello</div>";
});

So you can do:

// Create TabStrip
var ts = $("#tabstrip").kendoTabStrip({
    dataTextField: "Id",
    dataContentField: "Content",
    dataSource: data
}).data("kendoTabStrip");

Now for each tab, create the tree:

$.each(data, function(idx, item) {
    var c = ts.contentElement(idx);
    $(c).kendoTreeView({
        dataSource : item.Data
    });
});

You can see it running here : http://jsfiddle.net/OnaBai/x6Acn/1/