Hi Travis,
We understood your requirement to load the Tab content in the Selected event of Tab.
To explain better, the content of Tabs, by default will be loaded on demand i.e. once the Tab item is selected either by User Interaction or programmatically via
select method.
So, you can load the Tab content in Tab selection by mapping the selector of the DOM element in the content property as given in the below code.
[HTML]
<div class="control-section">
<div class="content-wrapper">
<div id="Tab"></div>
<button id="btn">Add Tab</button>
</div>
</div>
<div class="target" style="display: none">
dynamically added content goes here...
</div>
[JS]
let tabObj = new ej.navigations.Tab({
items: [
{
header: { 'text': 'Twitter' },
content: '<span>Twitter</span></br><div><input id="intext" class="e-input"></div>'
},
{
header: { 'text': 'Facebook' },
content: 'Facebook '
},
{header:{"text":"dynamic"},
content: "#target" // ID of content to be loaded upon Tab selection
}
],
selected: this.addTab
});
tabObj.appendTo('#Tab');
For your convenience, we have prepared a live sample based on your requirement available in the below link.
Here the Tab header will be rendered, and the Tab content will be loaded once you select the Tab item “dynamic”.
You can also add a new Tab item dynamically by using
addTab method. In the above example, we have showcased this by adding an item in the click event of Button.
Please check and get back to us in case of any further queries.
Regards,
Deepa L.
