How to add link in a Kendo UI tabstrip?

Question

I have an application where there are 5 tabs, it is mandatory that they are followed in sequence. When the page starts the first tab occupies the whole space of the window (it looks like it is not tabs), when it is clicked on the continue button, the aba1 is hidden and gives the place to aba2, which also occupies the entire window. What I need is that when the aba1 hide and aba2 appears a link in the corner referencing aba1, without being another tab. I am using Kendo UI. Code:

@(Html.Kendo().TabStrip()
.Name("Guia_TabStrip")
.HtmlAttributes(new { style = "border:none;" })
.Animation(a =>
{
    a.Enable(true);
    a.Open(o => o.Fade(FadeDirection.In).Duration(AnimationDuration.Fast));
})
.Items(items =>
{
    items.Add()
        .Text("01 - DADOS EMISSÃO")
        .HtmlAttributes(new { id = "Guia_01_DadosEmissao_Tab" })
        .Selected(true)
        .Content(@<text> <br />

       //restante do código

items.Add()
    .Text("02 - ENVOLVIDOS")
    .HtmlAttributes(new { id = "Guia_02envolvidos_Tab" })
    .Selected(false)
    .Content(@<text>   <br />

What I want to know is whether there is a link to that . Text("02 - ENGAGED") to reference aba1 which is 01 - Emission Data (I have the links ready, I just need to know how to put in there)

Answer 1

Try this:

 items.Add()
        .HtmlAttributes(new { id = "Guia_01_DadosEmissao_Tab" })
        .Content(@<text><a href="link.html" onclick="guia_tabstrip.select(0); aba_envolvidos.hide(); aba_dados.show()">01 - DADOS EMISSÃO</a></text>);

 items.Add()
        .HtmlAttributes(new { id = "Guia_02_Envolvidos_Tab" })
        .Selected(true)
        .Content(@<text><a href="link.html" onclick="guia_tabstrip.select(0); aba_envolvidos.hide(); aba_dados.show()">02 - ENVOLVIDOS</a></text>);

Answer 2

According to the telerik forum, you can change the title of the tab via javascript as follows:

$($("#tabstrip").data("kendoTabStrip").items()[tab_index_variable])
    .children()[0].innerText = "New Tab Title";

Adapting to your requirement, I would say that a possible solution would be like this:

$(function () {
    var linkHtml2 = "<a href='xpto.com.br'>Link</a>";
    $($("#Guia_TabStrip").data("kendoTabStrip").items()[2])
        .children()[0].innerHTML = linkHtml + "02 - ENVOLVIDOS";

    // código para cada uma das outras abas
    // ...

});