Is it possible to Clone/Copy Tab control on click of a button?

[Mahesh Machina]

Hi Team,

I have few text, Drop Down, Date fields spread across 3 headers(Tab1,Tab2,Tab3) and a Button in Tab1 

Whenever i click on that button, i want to add one more Tab control( Tab1,Tab2,Tab 3 along with text, Drop down, Date controls) to my web page. Is it possible?

Please let us know

Attachment: TabControl_65b9dab.zip

[Satheesh Kumar Balasubramanian]

Hi Mahesh,

Thanks for using Syncfusion Products.

We have validated your reported query at our end and let you know that currently it is not possible to clone tab control. But, we have achieved your requirement by changing the visibility of tab element on button click. For the same we have prepared a sample for your reference which can be downloaded from the following link.

Sample: https://www.syncfusion.com/downloads/support/forum/165645/ze/TabClone1562241577

Index.cshtml:   

<ejs-tab id="defaultTab" created="tabCreated">

    <e-tab-tabitems>

        <e-tab-tabitem header="ViewBag.headerTextOne" content="#Content0"></e-tab-tabitem>

        <e-tab-tabitem header="ViewBag.headerTextTwo" content="#Content1"></e-tab-tabitem>

        <e-tab-tabitem header="ViewBag.headerTextThree" content="#Content2"></e-tab-tabitem>

    </e-tab-tabitems>

</ejs-tab>

<div id="SecondTab">

    <ejs-tab id="innerTab">

        <e-tab-tabitems>

            <e-tab-tabitem header="ViewBag.headerTextFour" content="#Content3"></e-tab-tabitem>

            <e-tab-tabitem header="ViewBag.headerTextFive" content="#Content4"></e-tab-tabitem>

            <e-tab-tabitem header="ViewBag.headerTextSix" content="#Content5"></e-tab-tabitem>

        </e-tab-tabitems>

    </ejs-tab>

</div>

<script>

    function tabCreated() {

        document.getElementById("renderbtn").onclick = function (e) {

            document.getElementById("SecondTab").style.display = "block";

            var tabObj = document.querySelector('#innerTab').ej2_instances[0];

            tabObj.refreshActiveBorder();

        };

    }

</script>

<style>

    .e-content .e-item {

        font-size: 12px;

        padding: 10px;

        text-align: justify;

    }

    #SecondTab {

        display: none;

        margin-top: 30px;

    }

</style>

 

Kindly try the above sample and let us know if this meets your requirement.

Regards,

Satheesh Kumar B