[Solved] Tabstrip append not showing content

[Todor]

Append not showing tab content and throws when you try to select by index. Version 2024.3.1015

 

<div class="row" id="managing-directors-tab-strip"></div>

            const tabStrip = $("#managing-directors-tab-strip", container).kendoTabStrip({
                animation: false
            }).data("kendoTabStrip");

            tabStrip.append({ text: "Tab 1", content: "<text>111</text>" });
            tabStrip.select(index);

Uncaught TypeError: Cannot read properties of undefined (reading 'id')
    at init.contentElement (kendo.tabstrip.js:621:71)
    at init.contentHolder (kendo.tabstrip.js:631:41)
    at init._click (kendo.tabstrip.js:984:38)
    at init._itemClick (kendo.tabstrip.js:1208:22)
    at HTMLUListElement.dispatch (event.js:335:27)
    at elemData.handle (event.js:139:28)

[Todor]

It turns out that this bug was caused by not license version which inserts extra tab content with the real 'id'. If you have license works fine.

[Eyup]

Good to hear that, thanks for sharing!

Let us know if it happens when license is enabled.

[William]

It looks like the issue might be related to the content markup you're appending. In Kendo UI, the content field usually expects valid HTML elements, and <text> isn’t a standard HTML tag, which can sometimes cause the TabStrip to fail when it tries to create the content container.

Try replacing it with something like:

tabStrip.append({
    text: "Tab 1",
    content: "<div>111</div>"
});

Also make sure the tab exists before calling select(index). Sometimes after append() the DOM update hasn’t been processed yet, so selecting immediately by index can fail. A quick test is:

tabStrip.append({ text: "Tab 1", content: "<div>111</div>" });
tabStrip.select(tabStrip.items().length - 1);

If that works, then the issue was likely either the invalid <text> element or selecting an index that doesn’t exist yet.