This is a migrated thread and some comments may be shown as answers.

TabStrip with Add/Remove button

4 Answers 509 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Michele
Top achievements
Rank 2
Michele asked on 30 Jul 2013, 12:51 PM
Hello,
it's possible to have a TabStrip with items added dinamically? and also the possibility to remove panels?
Thanks

4 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 30 Jul 2013, 01:10 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Stefan
Top achievements
Rank 1
answered on 07 Dec 2015, 11:15 AM

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.
0
Dimo
Telerik team
answered on 09 Dec 2015, 09:57 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Stefan
Top achievements
Rank 1
answered on 13 Dec 2015, 08:16 AM

Hi Dimo,

Thanks, it worked.

Tags
TabStrip
Asked by
Michele
Top achievements
Rank 2
Answers by
Dimo
Telerik team
Stefan
Top achievements
Rank 1
Share this question
or