1

Estou com uma aplicação onde existem 5 abas, é obrigatório que elas sejam seguidas na sequencia. Quando é iniciada a página a primeira aba ocupada o espaço todo da janela (fica parecendo que não são abas), quando é clicado no botão continuar, a aba1 é escondida e da o lugar para aba2, que também ocupa toda a janela. O que eu preciso é que, quando a aba1 se esconder e aba2 apareça fique um link no canto referenciando a aba1, sem ser outra aba. Estou usando Kendo UI. Código:

@(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 />

O que eu quero saber é se tem como colocar um link naquele .Text("02 - ENVOLVIDOS") para referenciar a aba1 que é 01 - Dados de Emissão (eu tenho os links prontos, só preciso saber como se coloca ali dentro)

2
  • Esse comportamento de esconder abas é uma implementação sua ou nativa do Kendo ? Commented 5/02/2014 às 18:43
  • Implementação, feito em javascript Commented 6/02/2014 às 11:13

2 Respostas 2

1

Tente isso:

 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>);
14
  • Não Funcionou. <a href="#" onClick="guia_tabstrip.select(0); aba_envolvidos.hide(); aba_dados.show();" class="">Voltar Dados Emissão</a> esse é o meu link Commented 6/02/2014 às 11:39
  • ele imprimiu o html do <A /> na grid? Commented 6/02/2014 às 12:33
  • Nem chegou a abrir a página, deu um erro na linha que eu criei com o .Content Commented 6/02/2014 às 12:37
  • tenta fazer assim: Commented 6/02/2014 às 12:37
  • o .Content() espera qual tipo de parâmetro? (string, int..) Commented 6/02/2014 às 12:38
0

Segundo o fórum da Telerik, você pode alterar o título da aba via javascript da seguinte maneira:

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

Adaptando ao seu requisito, eu diria que uma possível solução seria assim:

$(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
    // ...

});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .