Using a common container[div] for multiple tabs

[Sourish]

Hi,
We have a requirement of sharing a content [ basically a div and some controls inside it] with multiple tabs.
Now while doing that, we have to generate these tabs dynamically and assign it to the common control we already have in the mark up.

Let me give an example:

<div id="lefttabstrip">

 

                <ul class="Home">

                    <li class="TabAct k-state-active">All Rules</li>

               </ul>

 

               <div id="homediv>

                     Home text

               </div>

 

              <div id="mycommondiv>

                     some controls here

              </div>

 

<div>

Now we already have Home tab which will show content of "homediv" .
What we want to do now is to append tabs to the home tab which all will be showing the content of "mycommondiv".
Any work around for this?

Any help is much appreciated.

Thanks,
Sourish

 

[Alexander Valchev]

Hello Sourish,

It is possible to dynamically append tabs with the append method. The generated tabs will be added as a children to the TabStrip DOM element.
You can access the tab content through the contentElements property. For example:

var tabs = $("#lefttabstrip").data("kendoTabStrip");

tabs.contentElements.html();

Regarding second part of the message, I am not sure what exactly do you mean. Could you please specify your question or if possible to provide us with an example?

Greetings,
Alexander Valchev
the Telerik team

[Sourish]

Hi ,
Thanks for the reply.
My second query was how I would be able to create/append multiple tabs dynamically which ALL will be sharing the content of the same DIV.
So in my example "mycommondiv" will be my shared container.
So now how would I be able to create tabs say Tab1,Tab2,Tab3....TabN dynamicaly which all will have "mycommondiv" as their content.
So whichever tab I click, it all will show me the content of "mycommondiv".


Thanks,
Sourish

[Alexander Valchev]

Hello Sourish,

I would suggest to use the content property of the append method to add the common HTML element. For example:

var tabstrip = $("#tabstrip").data("kendoTabStrip");
tabstrip.append({
    text: "new tab",
    content: commonDiv
});

Alternatively you can access the new created tab via contentElement method and manipulate the innerHTML. Please check the following sample:

var tabs = $("#tabstrip").data("kendoTabStrip");
var theTab = tabs.contentElement(1); // 1 represents the number of the tab
theTab.innerHTML += commonDiv; //appends the common div

In the attachments you can find a demo page showing this approach in action.
I hope this information helps.

Regards,
Alexander Valchev
the Telerik team

[Sourish]

Thanks for the reply.
Actually in the below given example is the commonDiv is getting created again and again for each tabs being added.
That is, if I add a new tab then corresponding div having content commonDiv is getting created.In that case its ending up using more resources.
What I am looking for is a single contentDiv which will be shared by all tabs.Even if the tabs are getting created,it will not create another commonDiv but rather it will point to the existing commonDiv.


Regards,
Sourish

[Alexander Valchev]

Hi Sourish,

The functionality that you are looking for is not available at this stage. I will forward your feedback to the developers and it will be discussed. We will appreciate if you submit your idea at our uservoice page too, so the community can discuss and vote for it.

For now you may consider implementing your own logic or using the suggested workaround.

Regards,
Alexander Valchev
the Telerik team