Hi Mario,
Thanks for your interest in Syncfusion products.
To create tab dynamically, create wrapper element without data-role=”ejmtab”
attribute as in below code snippets.
HTML <div id="tabsample">// Tab Wrapper <ul>
<li data-ej-rel='nofollow' href="#default1" data-ej-text='Movies'></li> // Tab Item
<li data-ej-rel='nofollow' href="#default2"
data-ej-text='Music'></li>// Tab Item
<li data-ej-rel='nofollow' href="#default3"
data-ej-text='Favourites'></li>// Tab Item
<li data-ej-rel='nofollow' href="#default4"
data-ej-text='Playlist'></li>// Tab Item </ul> </div> |
To initialize tab dynamically please call ejmTab() plugin on document.ready.
Please refer the below code snippets.
Script
<script>
$(document).ready(function () {
$('#tabsample').ejmTab(); // Creating Tab Dynamically with
default values });
<script>
$(document).ready(function () {
$('#tabsample').ejmTab({theme:”dark”}); // Creating Tab
Dynamically with custom values }); |
Also
we have attached reference sample in the below link.
Tab_Sample.zip
Please check this let us know if you have any queries.
Regards,
Aravindan
Hi Mario,
Sorry for the inconvenience caused. We have tried your code in our sample and we are unable to reproduce the issue in our side, since we are able to load a new tab item successfully. We have attached a sample below, in which new tab is added as you have tried. Also, the sample showcases how to load a tab item through AJAX call. Could you please check with the attached sample? If still you face problem please revert back the sample along with the replication procedure of issue. This will help us to serve you better. Please find the sample location as follows,
Sample location: Tab Sample
Query: how to ajax load the tab
Please refer the code snippet below,
$.ajax({ url: "Gridcontent.TXT", datatype: "html", success: function (content) { if (success) { tabObj.add("#NewTabItem", "GridItem", 2); $("#NewTabItem").html(content); //The content from Gridcontent.TXT is loaded to the newly added tab item success = false; } }, }); |
Here, the AJAX “url” specifies the path of the file, using the text content of “Gridcontent” file we are going to load the content for the new tab item on success. On AJAX success function, new tab item is added using tab object and the content for the new tab item is added by using the method html().
Please let us know if you have further queries.
Regards,
HariKrishnan.