We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Create tab dynamically

Hi,
can you provide a sample on how to create a tab dynamically?

4 Replies

AV Aravindan V Syncfusion Team April 30, 2014 12:41 PM UTC

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


Option 1

 

<script>

        $(document).ready(function () {

            $('#tabsample').ejmTab(); // Creating Tab Dynamically with default values 

        });
</script>

Option 2

 

<script>

        $(document).ready(function () {

            $('#tabsample').ejmTab({theme:”dark”}); // Creating Tab Dynamically with custom values 

        });
</script>

 

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 



MZ Mario Zucca May 1, 2014 03:08 PM UTC

Hi Aravindan,
thanks for your reply. I wasn't really clear, I meant to ask how to create a tab panel inside an already created tab and if the new tab can be loaded by an Ajax call.

best regards
mario


MZ Mario Zucca May 1, 2014 04:38 PM UTC

Hi tried this simple code:
var tab = $("#mainTab");
tab.ejTab("add","#tabItem1","New Item",3);

It works but after the tab has been added all the tabs seem to be disabled (when I click over any tab nothing happens). And I don't know how to ajax load the tab

thanks in advance


HP Harikrishnan P Syncfusion Team May 2, 2014 01:47 PM UTC

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.


Attachment: Tab_Ajax_Call_27dc6673.zip

Loader.
Up arrow icon