Renaming / hiding tabs

11 posts, 1 answers
  1. AP
    AP avatar
    205 posts
    Member since:
    Apr 2010

    Posted 20 Aug 2013 Link to this post

    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.
  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1436 posts

    Posted 21 Aug 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. AP
    AP avatar
    205 posts
    Member since:
    Apr 2010

    Posted 21 Aug 2013 Link to this post

    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
  4. Answer
    Alexander Popov
    Admin
    Alexander Popov avatar
    1436 posts

    Posted 21 Aug 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. AP
    AP avatar
    205 posts
    Member since:
    Apr 2010

    Posted 21 Aug 2013 Link to this post

    That's brilliant. Thanks very much.
  6. Sam
    Sam avatar
    14 posts
    Member since:
    Aug 2015

    Posted 12 Jun Link to this post

    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.

  7. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    592 posts

    Posted 14 Jun Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  8. Sam
    Sam avatar
    14 posts
    Member since:
    Aug 2015

    Posted 14 Jun Link to this post

    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.

  9. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    592 posts

    Posted 16 Jun Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  10. Sam
    Sam avatar
    14 posts
    Member since:
    Aug 2015

    Posted 16 Jun in reply to Veselin Tsvetanov Link to this post

    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!

  11. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    592 posts

    Posted 20 Jun Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top