How to add link in a Kendo UI tabstrip?

Asked

Viewed 237 times

1

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)

html html5 kendo-ui

  • This hiding tabs behavior is either your or Kendo’s native implementation ?

  • Implementation, done in javascript

2 answers

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>);

  • It Didn’t Work. <a href="#" onClick="guia_tabstrip.select(0); aba_envolvidos.Hide(); aba_dados.show();" class=""">Back Data Issue</a> this is my link

  • he printed the <A /> html on the grid?

  • Didn’t even open the page, there was an error in the line I created with . Content

  • tries to do so:

  • o . Content() expects what type of parameter? (string, int..)

  • items. Add() . Text("01 - EMISSION DATA") . Htmlattributes(new { id = "Gui_01_dadosemissao_tab" }) . Selected(true) . Content(@<text> <a href="#"> Foo </a> </text>)

  • To understand better http://imageshack.com/a/img850/1760/40uc.png http://imageshack.com/a/img541/8467/ulsy.png

  • Almost worked this you gave me, problem that the link was not exactly on the tab, was just below it

  • Try to edit by changing or adding the new code example. It’s very difficult to read and track comments. And to @Thiagoalex put the images and clarifications in the question so other people can help you.

  • Managed to do there ??

  • http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/aspnet-mvc/helpers/tabstrip/overview#Handling-Kendo-ui-tabstrip-Events

  • I decided to hide the tabs and do them in the hand, it was becoming something very complex, at least for me that I am beginner. I added another div and have been putting and hiding tabs when I need to. I will read this article and see if it works any other way.

  • @Thiagoalex solved his problem?

  • I decided, but otherwise not with Kendo, I did everything with html attributes, css and javascrip in the same hand. We are studying a way to do with Kendo, but for now it has only been possible this way.

Show 9 more comments

0

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

});

Browser other questions tagged html html5 kendo-ui

You are not signed in. Login or sign up in order to post.