Renaming / hiding tabs

5 posts, 1 answers
  1. AP
    AP avatar
    187 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
    1416 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. UI for ASP.NET MVC is VS 2017 Ready
  4. AP
    AP avatar
    187 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
  5. Answer
    Alexander Popov
    Admin
    Alexander Popov avatar
    1416 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!
  6. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 21 Aug 2013 Link to this post

    That's brilliant. Thanks very much.
Back to Top
UI for ASP.NET MVC is VS 2017 Ready