TabStrip with Add/Remove button

[Michele]

Hello,
it's possible to have a TabStrip with items added dinamically? and also the possibility to remove panels?
Thanks

[Dimo]

Hello Paolo,

The TabStrip itself does not have add/remove buttons, but you can add custom ones on the page that use the widget's API.

http://demos.kendoui.com/web/tabstrip/api.html

http://docs.kendoui.com/getting-started/web/tabstrip/overview

http://docs.kendoui.com/api/web/tabstrip

Regards,
Dimo
Telerik

[Stefan]

Hi Dimo,
 I am having an image in a span inside the li of the tabstrip, and i tried the following code to remove it
onclick of the image function{
var index = $(this).parent().index();
var tabStrip = $('#tabstrip').getKendoTabStrip();
tabStrip.remove(index);
} 
But when i do this, say, if there are 4 tabs and I've selected the 2nd tab and then clicked on the image to remove that particular tab, then, all the subsequent tabs and their contents are removed.(that is, here, in this case 2,3,and 4th tabs..) Moreover, when a new tab is appeneded, it doesnt load the contents too.

 

Can you please tell me any workaround for this scenario?

 

I also tried 

var index = $(this).parent().index();
$(this).parent().remove();
$( ".k-content:eq("+index+")" ).remove();

 

But in this case as in the previous case 2nd tab as well as 3rd tab contents were removed. (4th tab and its contents were ok)

But, here also when i tried to append a new tab it didn't work.

[Dimo]

Hi Stefan,

Removing TabStrip items via DOM manipulation (the second option that you have tried) is likely to cause undesired side effects, as the widget will not be aware of the change.

Using the first option should work, given that the provided index is correct. In your case it should be equal to 1. Can you please verify this?

You can test the same scenario on our online demos:

1) Open http://demos.telerik.com/kendo-ui/tabstrip/index
2) Execute the following in the browser's JavaScript console:

$("#tabstrip").data("kendoTabStrip").remove(1);

The second tab will be removed and all remaining tabs will stay intact.

In case the index is 1 and the TabStrip still does not work as expected, please check the following:

- the web page HTML markup is valid
https://validator.w3.org/
- the TabStrip is initialized only once
http://docs.telerik.com/kendo-ui/intro/installation/jquery-initialization#duplicate-initialization

If you need further assistance, please provide a runnable example, so that I can see what is going on.

Regards,
Dimo
Telerik

[Stefan]

Hi Dimo,

Thanks, it worked.