Kendo UI Tabs - Tabs not working after a tab was removed

Question

I have a kendo ui tabstrip. On page load, I removed the tabs which have an empty content.

It works fine, I get the tabs I need to show, but moving between tabs doesn't work anymore.

For example I have this structure: Tab 1 - has content Tab 2 - no content - removed Tab 3 - has content

When I load the page, Tab 1 is loaded and selected, but when I click on tab 3, I get empty contents. The HTML structure is ok. The aria-controls attribute holds the correct value (tabstrip_wp_c09daa66ff014cc29c09eca6d0c9acfb-1 for Tab 1, tabstrip_wp_c09daa66ff014cc29c09eca6d0c9acfb-2 for Tab 3), which is the id of the divs.

Both divs have the correct ids and related contents.

Upon click Tab 3, the corresponding div doesn't change in any way (still has the same css class, and aria-hidden="true" aria-expanded="false").

Anyone knows why this happens?

Thanks

I can't reproduce your error. Removing tabs in kendo example: dojo.telerik.com/ElAfo works perfectly. Can you upload your code please? — Jarosław Kończak
Intersting, I'm using the same code I use at my site (dojo.telerik.com/ElAfo/2), and I can't reproduce it either. I'll try tomorrow to see what is causing this — Yehuda
My issue is that I had the remove script in the ready function. When removing the $(document).ready, it's working as intended. — Yehuda

Jarosław Kończak Jarosław Kończak · Accepted Answer · 2014-10-10T18:05:53

Maybe you are loading content with ajax and tabstrip trying to add loaded content to deleted tabstrip? If so you should use contentLoad event in place of document.ready().

My alternate sugesstion is to hide empty tab instead of delete it:

var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
var items = $($("#tabstrip").data("kendoTabStrip").items());
if (contentHolder.text() == "") {
  $(items[i]).hide();
}

In addition you have to check index of first not empty tab and select it.

Kendo UI Tabs - Tabs not working after a tab was removed

1 Answers