Kendo UI - How to add AND select a new Tab (on TabStrip control) using javascript

Question

I've created a function that opens a new tab in my Kendo UI TabStrip control:

function AddTab(targetUrl, title) {
        $("#tabstrip").data("kendoTabStrip").append({ text: title, contentUrl: targetUrl });
    }

This will add the tab to the end, but will not select it. How can I select it to become the active tab!? Do I need to set an id when I create the tab, and then call the select(..) function, or can I do it in one line?

I need to automatically generate a load of links, each will take in a different title and targetUrl.

Answer 1

Try this

<div id="tabstrip">
  <ul>
    <li class="k-state-active">First Tab</li>
    <li>Second Tab</li>
  </ul>
  <div>
    First text
  </div>
  <div>
    Second text
  </div>
</div>
<input type="button" value="Add Tab" onclick="AddTab('google', 'http://google.com')" />


<script>
function AddTab(targetUrl, title) {
  var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
  tabStrip.append({ text: title, contentUrl: targetUrl, content: "Your content" });
  tabStrip.select((tabStrip.tabGroup.children("li").length - 1));
}
</script>

Reference link

Answer 2

try like this. // from documentation Kendo Ui tabstrip

var tabStrip = $("#tabStrip").data("kendoTabStrip");
tabStrip.insertAfter(
    { text: "New Tab" },
    tabstrip.tabGroup.children("li:last")
);

for selecting it

$(document).ready(function(){
    var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
    tabstrip.select(yourIndexoftheTab);
});