Cloning Tab header and Placing it in new location is not working

Hi,

I am facing one issue,
My requirement is ,

 I have created a Tab, with Tab headers and the Tab content,
Now I just want to clone the header part remove it from this location and place it in the new location.
But the newly placed header is not working.

Egs :-

Created the Cshtml file for the tab -  so tab is created here,
In the same Cshtml file I have an empty div element.


In js, I am trying to clone the Tab header and place in the other div,
The js code 

$('#origin').find('.e-tab-header').clone(true,true).appendTo('#EF_Test');

#origin is the tab.
I am trying to place the header in this new div #EF_Test.

I just want to cut the header from this location and place it in new location, and expecting the rest functionalities to work as normal Tab functionalities.

Thanks
Darshan


1 Reply

SK Satheesh Kumar Balasubramanian Syncfusion Team July 21, 2023 11:51 AM UTC

Hi Darshan,

According to the current tab architecture, it is not possible to clone the header and place it in new location. Since, we cannot achieve all the functionalities of tab after clone the header and place it in new location. But, you can use our base draggable and droppable to achieve your requirements.


Regards,
Satheesh Kumar B

Attachment: TabComponent_447feae0.zip

Loader.
Up arrow icon