Renaming / hiding tabs

[AP]

I have a tab strip with three tabs, each containing a text box  and a save button, for users to enter some comments in.
Depending on the selection of a drop-down list, I need to hide one tab, and rename another one.

The best I can do is disable one tab.  I don't want to have to destroy and recreate the tabs, as I'm already loading data via ajax into each of the text boxes, on the drop-down list change.

How can I change a tab's title, and hide / unhide one.

@(Html.Kendo().TabStrip()
    .Name("tabstrip")
     .Items(items =>
    {
        items.Add().Text("Unplanned").Content(@<text>
    <div style="margin-top:5px;margin-bottom:10px;margin-left:5px;">
    <textarea id="hs1" name="TextArea1" rows="4" style="width: 500px"></textarea>
    <p><button class="k-button" onclick="saveHSOne();">Save</button></p>
        </div>

</text>).Selected(true);


        items.Add().Text("Planned").Content(@<text>
     <div style="margin-top:5px;margin-bottom:10px;margin-left:5px;">
    <textarea id="hs2" name="TextArea2" rows="4" style="width: 500px"></textarea>
    <p><button class="k-button" onclick="saveHSTwo();">Save</button></p>
        </div>


</text>);


        items.Add().Text("Specialised").Content(@<text>
     <div style="margin-top:5px;margin-bottom:10px;margin-left:5px;">
    <textarea id="hs3" name="TextArea3" rows="4" style="width: 500px"></textarea>
    <p><button class="k-button" onclick="saveHSThree();">Save</button></p>
        </div>


</text>);

    })
            )

I can disable one tab, but not hide it

if (currentDiv != 'XXX') {
                        //Hide third tab
                            tabStrip.enable(tabStrip.tabGroup.children("li:eq(2)"), false); // disable tab 1
                    }
                    else {
                        //show third tab
                        tabStrip.enable(tabStrip.tabGroup.children("li:eq(2)"), true); // disable tab 1
                    }

Is this possible? I can't see anything in the API about this.

[Alexander Popov]

Hi Andrew,


In case you want to retain the already loaded data I would recommend changing the tab's CSS display property. Setting it to none hides the tab and setting it back to inline shows the tab. Here is an example of hiding and renaming tabs:   

$($("#tabstrip").data("kendoTabStrip").items()[tab_index_variable]).attr("style", "display:none");
$($("#tabstrip").data("kendoTabStrip").items()[tab_index_variable
]).children()[0].innerText = "New Tab Title";

The above code can be executed once the DropDownList select event is triggered.
 
Kind Regards,
Alexander Popov
Telerik

[AP]

Thanks for your quick response. It's very nearly a perfect solution.
However, when the hidden tab is re-displayed it doesn't display perfectly (I've attached a screenshot).

Any ideas on how to stop this?

Thanks

[Alexander Popov]

Hello Andrew,

I managed to reproduce this. To avoid it, set the "display" property to "inline-block".
Here is a jsBin demonstrating how to hide, show and rename Kendo UI tabs.


Regards,
Alexander Popov
Telerik

[AP]

That's brilliant. Thanks very much.

[Sam]

If I hide a tab, every time I switch tabs, the entire tab strip is redrawn. The tabs collapse and then expand again, which is very distracting to the user. This also happens on Alexander's example at http://jsbin.com/OxOM/3/edit?html,js,output

I have set the tab strip's animation like this:

.Animation(animation => animation.Enable(false))

but it did not help.

Is there a way to hide the tab without causing this behavior?

Thanks.

[Veselin Tsvetanov]

Hello Sam,

I am not quite sure if I correctly understand the issue faced and the required end result. In case you would like to disable the TabStrip animation in the HTML helper initialization of the widget, the suggested configuration syntax is the proper way to do that.

If you still face the same issue, I would like to ask you to prepare and send us a short video demonstrating the undesired behaviour of the widget.

Regards,
Veselin Tsvetanov
Progress Telerik

[Sam]

You can see it at Alexander's demo at http://jsbin.com/OxOM/3/edit?html,js,output

The you click on a tab, the new tab's contents disappear and the tab strip shrinks. Then a half a second later, the content is shown, and the tab strip expands back to its normal size. I don't want this shrinking/expansion to happen, because I think it's distracting.

On one grid, I fixed this problem by turning off the animation, and it works just fine. I switch tabs, and the tab strip height never changes.

On another grid, I also turned off the animation. But when I switch tabs, the tab height does change. I realized that the problem is caused by this code that hides a tab:

var TabStrip = $("#Tabstrip").kendoTabStrip().data("kendoTabStrip");
 $(TabStrip.items()[2]).hide();

 

If I comment that out, the tab strip height does not change when I switch tabs.

I need a way to hide a tab but NOT cause the tab strip height to change when I switch tabs.

Thanks.

[Veselin Tsvetanov]

Hello Sam,

Here you will find a simple Dojo, that implements the described scenario. You will notice, that I have disabled the animations for the TabStrip:

$("#Tabstrip").kendoTabStrip({
    animation:  false,
.........

and I have also implemented an event handler for the select event, which hides the third tab of the TabStrip (the London one):

select: function(e) {
    var TabStrip = $("#Tabstrip").kendoTabStrip().data("kendoTabStrip");
    $(TabStrip.items()[2]).hide();
}

Here you will find a short video, which demonstrates the behavior of the widget in this scenario. You will notice, that no change of the height could be observed.

May I ask you to modify this Dojo, so it reproduces the problem observed and send that back to us?

Regards,
Veselin Tsvetanov
Progress Telerik

[Sam]

I made a function for hiding the tab I don't want:

    function SelectGroupTab()
    {
        var TabStrip = $("#Tabstrip").kendoTabStrip().data("kendoTabStrip");
        $(TabStrip.items()[2]).hide()
    }

Then I added your code to my document ready function:

        $("#Tabstrip").kendoTabStrip(
        {
            animation:  false,
            select: function(e)
            {
                SelectGroupTab();
            }
        });

Running this code works perfectly. When I switch tabs, the height of the tab strip does not change. So thanks for helping, I will go with this solution.

I am curious about one thing. Instead of the above code, I tried putting this onto the tab strip itself:

.Events(e => e.Select("SelectGroupTab"))

What is strange is that when I switched tabs, the SelectGroupTab function did NOT get called. Any idea why?

In any case, your above solution works, so thanks a lot!

[Veselin Tsvetanov]

Hello Sam,

Please, excuse me for the improper suggestion in my previous post. The following line:

var TabStrip = $("#Tabstrip").kendoTabStrip().data("kendoTabStrip");

should be altered to:

var TabStrip = $("#Tabstrip").data("kendoTabStrip");

as in the first case a new TabStrip gets initialized on top of the existing one.

Concerning the razor syntax initialization, the proper way to configure the TabStrip and attach an event handler is the following:

@(Html.Kendo().TabStrip()
    .Name("Tabstrip")
    .Animation(false)
    .Events(e => e.Select("SelectGroupTab"))
    .Items(tabstrip =>
    {
.................

Attached you will find a sample .cshtml page, implementing the above suggestion.

Regards,
Veselin Tsvetanov
Progress Telerik