How to add link in a Kendo UI tabstrip?

Question

How to add link in a Kendo UI tabstrip?

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I have an application where there are 5 tabs, it is mandatory that they be followed in sequence. When the page starts the first tab occupied the entire window space (it looks like they are not tabs), when the continue button is clicked, aba1 is hidden and gives the place to aba2 , which also occupies the entire window. What I need is that when aba1 is hidden and aba2 appears, there is a link in the corner referencing aba1 , without being another tab. I'm 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 if you have a link in that .Text ("02 - INVOLVED") to reference the aba1 that is 01 - Emission Data (I have the links ready, I just need to know how to put it in there)

html html5 kendo-ui

asked by anonymous 05.02.2014 / 19:06

2 answers

Receiving wrong id Converting output in a text box to a PivotTable

score 1 · 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>);

score 0 · Answer 2

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

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

Adapting to your requirement, I would say a possible solution would look 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
    // ...

});