Kendo TabStrip Jquery not working

Question

So I am trying to dynamically add some content to a Kendo TabStrip through JavaScript. The code Im using to get the Jquery object is:

$(document).ready(function () {

    $tabStrip = $("#tabStrip");
    alert(JSON.stringify($tabStrip));        
    $kendoTabStrip = $tabStrip.kendoTabStrip();
    alert(JSON.stringify($kendoTabStrip));
    $data = $kendoTabStrip.data("kendoTabStrip");
    alert(JSON.stringify($data));
});

This would synthetize to

$tabstrip=$('$tabStrip".kendoTabStrip().data("kendoTabStrip")

However, when I call an append method i get an error. This is why I put the alert to know the value of the tabstrip and each time I am getting "undefined". I do not know what to do. I appreciate any help.

Greetings, Luis.

Answer 1

In order to get a reference to the TabStrip normally you use:

$tabStrip = $("#tabStrip").data("kendoTabStrip");

you can also do:

$tabStrip = $("#tabStrip").kendoTabStrip().data("kendoTabStrip");

Doing this, you can call append for appending an additional tab. Example:

$tabStrip.append(
    [
        {
            text: "Baiona",
            content: "<h2>N/A</h2><p>Not available</p>"
        }
    ]
);

See it in action here : http://jsfiddle.net/OnaBai/5rgd7/

NOTE: your $data is actually the reference to the TabStrip object so using your code you should do $data.append(...).