[Solved] Toggling TabStrip Visibility (Client-Side API?)

[Ahad]

Hello,

I'm running into a problem in being able to toggle the visibility of tabs when the tabs start off with Visibility set to false from the beginning. For tabs that are started visibly, my toggle can hide and show them just fine, because the indexing is appropriate. However, when they are hidden from the start, the indexing doesn't stay sequential as I had thought, and I'm not sure how to define a name for a tab or set it's id. I can set a name for the overall TabStrip, but not the individual Tab - unless there's a way how and I just don't know about it. I'm not sure if a solution is already implemented or not in the Telerik TabStrip control. I'm running ASP.NET MVC 3, using Telerik TabStrip v.2011.1.315.340 and Razor.

I have a partial view, _PurchaseCriteria.cshtml:

<div class="collapsibleContainer" title="Purchase Criteria">
    <div class="body">
        @{Html.Telerik().TabStrip()
            .Name("TSPurchaseCriteria")
            .Items(ts =>
            {
                ts.Add().Text("Credit Score").Content(
                    @<table>
                            <tr><td>Min</td><td>Date Range</td></tr>
                                <tr><td><input type="text" /></td><td>@(Html.Telerik().DatePicker().Name("DateStart").OpenOnFocus(true).ShowButton(true))@(Html.Telerik().DatePicker().Name("DateEnd").OpenOnFocus(true).ShowButton(true))</td></tr>
                                <tr><td> </td><td align="right"><button class="t-button t-state-default">Save</button><button class="t-button t-state-default">Close</button></td></tr>
                         </table>);
                ts.Add().Text("RMR Range").Content(@<p>Hello RMR Range</p>);
                ts.Add().Text("Activation").Content(@<p>Hello Activation</p>);
                ts.Add().Text("Contract Term").Content(@<p>Hello Contract Term</p>);
                ts.Add().Text("EPP Requirement").Content(@<p>Hello EPP Requirement</p>).Visible((bool)ViewData["EPPRVisible"]);
                ts.Add().Text("Late Submission Percentage").Content(@<p>Hello Late Submission Percentage</p>).Visible((bool)ViewData["LSPVisible"]);
                ts.Add().Text("Max Low Score Percentage").Content(@<p>Hello Max Low Score Percentage</p>).Visible((bool)ViewData["MLSPVisible"]);
                ts.Add().Text("Max Commercial Percentage").Content(@<p>Hello Max Commercial Percentage</p>).Visible((bool)ViewData["MCPVisible"]);
                ts.Add().ImageUrl(Url.Content("~/Content/icons/add_tab.png")).LoadContentFrom("AjaxView_AddCriteria", "DealerOfferManagement");
            })
            .SelectedIndex(0)
            .Render();
        }
    </div>
</div>

As you can see, the top 4 tabs are essentially "required" and so the visibility can't be toggled. The bottom 4 are optional, and the first of them is set to be visible from the beginning whereas the rest are set to be hidden.

In the controller, the ajax function is quite simple:

public ActionResult AjaxView_AddCriteria()
        {
            return PartialView("~/Areas/DealerManagement/Views/UserControls/_AddCriteria.cshtml");
        }

Now, the _AddCriteria partial has the functionality that I'm using to display a list of buttons in the final "+" tab that allows the optional tabs to be toggled to visible or hidden:

<script type="text/javascript">
    function getTabStrip() {
        //"TSPurchaseCriteria" is the value specified by the Name() method.
        var menu = $("#TSPurchaseCriteria").data("tTabStrip");
        return menu;
    }

    function getItem(idx) {
        var tabstrip = getTabStrip();
        var item = $("li", tabstrip.element)[idx];
        return item;
    }

    function Toggle(item, idx) {
        var tabstrip = getTabStrip();

        if ($(item).is(":visible")) {
            $('#TSPurchaseCriteria .t-item:eq(' + idx + ')').hide();
        }
        else {
            $('#TSPurchaseCriteria .t-item:eq(' + idx + ')').show();
        }
    }

    function MakeEPPRVisible() {
        var item = getItem(4);
        Toggle(item, 4);
    }

    function MakeLSPVisible() {
        var item = getItem(5);
        Toggle(item, 5);
    }

    function MakeMLSPVisible() {
        var item = getItem(6);
        Toggle(item, 6);
    }

    function MakeMCPVisible() {
        var item = getItem(7);
        Toggle(item, 7);
    }
</script>

<p>
    <button class="t-button t-state-default" onclick="MakeEPPRVisible()">EPP Requirement</button><br />
    <button class="t-button t-state-default" onclick="MakeLSPVisible()">Late Submission Percentage</button><br />
    <button class="t-button t-state-default" onclick="MakeMLSPVisible()">Max Low Score Percentage</button><br />
    <button class="t-button t-state-default" onclick="MakeMCPVisible()">Max Commercial Percentage</button><br />
</p>

It isn't cleaned up yet, but it defines how I'd like things to work - except that I hate grabbing tabs by the index, but I didn't seem to have a choice.

So, the problem doesn't exist if the first partial view starts off with all tabs visible. Things work fine at that point. But, the problem exists when some of the tabs are hidden: the indexing is sequential for the visible tabs, not for all generated tabs.

Is there a workaround for this? Or even better, is there a method by which I can properly name and retrieve the desired tab itself, so I can turn around and set it's visibility (or other properties) directly?

Thanks,
  Ahad L. Amdani

[Ahad]

I've updated the accessing methods to utilize custom HtmlAttributes that I've attached to each of the optional tabs, so that at least takes care of accessing by numeric index - however, I've found that the resulting HTML of Visible(false) tabs doesn't even get generated. Is this logic hidden in a div somewhere?

Updated _PurchaseCriteria partial view:

<div class="collapsibleContainer" title="Purchase Criteria">
    <div class="body">
        @{Html.Telerik().TabStrip()
            .Name("TSPurchaseCriteria")
            .Items(ts =>
            {
                ts.Add().Text("Credit Score").Content(
                    @<table>
                            <tr><td>Min</td><td>Date Range</td></tr>
                                <tr><td><input type="text" /></td><td>@(Html.Telerik().DatePicker().Name("DateStart").OpenOnFocus(true).ShowButton(true))@(Html.Telerik().DatePicker().Name("DateEnd").OpenOnFocus(true).ShowButton(true))</td></tr>
                                <tr><td> </td><td align="right"><button class="t-button t-state-default">Save</button><button class="t-button t-state-default">Close</button></td></tr>
                         </table>);
                ts.Add().Text("RMR Range").Content(@<p>Hello RMR Range</p>);
                ts.Add().Text("Activation").Content(@<p>Hello Activation</p>);
                ts.Add().Text("Contract Term").Content(@<p>Hello Contract Term</p>);
                ts.Add().HtmlAttributes(new { id = "EPPR_tab" }).Text("EPP Requirement").Content(@<p>Hello EPP Requirement</p>).Visible((bool)ViewData["EPPRVisible"]);
                ts.Add().HtmlAttributes(new { id = "LSP_tab" }).Text("Late Submission Percentage").Content(@<p>Hello Late Submission Percentage</p>).Visible((bool)ViewData["LSPVisible"]);
                ts.Add().HtmlAttributes(new { id = "MLSP_tab" }).Text("Max Low Score Percentage").Content(@<p>Hello Max Low Score Percentage</p>).Visible((bool)ViewData["MLSPVisible"]);
                ts.Add().HtmlAttributes(new { id = "MCP_tab" }).Text("Max Commercial Percentage").Content(@<p>Hello Max Commercial Percentage</p>).Visible((bool)ViewData["MCPVisible"]);
                ts.Add().ImageUrl(Url.Content("~/Content/icons/add_tab.png")).LoadContentFrom("AjaxView_AddCriteria", "DealerOfferManagement");
            })
            .SelectedIndex(0)
            .Render();
        }
    </div>
</div>

Resultant HTML snippet of updated partial view's rendered tab strip:

<div class="t-widget t-tabstrip t-header" id="TSPurchaseCriteria">
    <ul class="t-reset t-tabstrip-items">
        <li class="t-item t-state-default t-state-active">
            <a class="t-link" href="#TSPurchaseCriteria-1">Credit Score</a>
        </li>
        <li class="t-item t-state-default">
            <a class="t-link" href="#TSPurchaseCriteria-2">RMR Range</a>
        </li>
        <li class="t-item t-state-default">
            <a class="t-link" href="#TSPurchaseCriteria-3">Activation</a>
        </li>
        <li class="t-item t-state-default">
            <a class="t-link" href="#TSPurchaseCriteria-4">Contract Term</a>
        </li>
        <li class="t-item t-state-default" id="EPPR_tab">
            <a class="t-link" href="#TSPurchaseCriteria-5">EPP Requirement</a>
        </li>
        <li class="t-item t-state-default">
            <a class="t-link" href="/DealerOfferManagement/AjaxView_AddCriteria">
                <img alt="image" class="t-image" src="/Content/icons/add_tab.png" />
            </a>
        </li>
    </ul>
</div>

Notice how it's missing the other _tab definitions?

Updated _AddCriteria partial view (called from intermediate Ajax function):

<script type="text/javascript">
    function Toggle(item) {
        if ($(item).is(":visible")) {
            $(item).hide();
        }
        else {
            $(item).show();
        }
    }

    function MakeEPPRVisible() {
        Toggle("#EPPR_tab");
    }

    function MakeLSPVisible() {
        Toggle("#LSP_tab");
    }

    function MakeMLSPVisible() {
        Toggle("#MLSP_tab");
    }

    function MakeMCPVisible() {
        Toggle("#MCP_tab");
    }
</script>

<p>
    <button class="t-button t-state-default" onclick="MakeEPPRVisible()">EPP Requirement</button><br />
    <button class="t-button t-state-default" onclick="MakeLSPVisible()">Late Submission Percentage</button><br />
    <button class="t-button t-state-default" onclick="MakeMLSPVisible()">Max Low Score Percentage</button><br />
    <button class="t-button t-state-default" onclick="MakeMCPVisible()">Max Commercial Percentage</button><br />
</p>

So, is there somewhere the classes are being defined? Or do I have to have all tabs "visible" from the beginning and then have some function run that iterates through the collection and hides the ones that are supposed to be invisible?

Thanks, 
  Ahad L. Amdani

[nachid]

It is well documented that invisible tabs are not rendered.
There is no need to read the documentation to confirm.
You can see it in the intellisense on the visible property.

I guess jQuery is your friend here to hide/show tabs at your needs

[Ahad]

So, does that mean the only solution is to render the tabs and then utilize jQuery to hide them once the page loads?

[nachid]

I never said it is the only solution as there are always so many possibilities...
However, now that you found the way to name your tabs, it is so easy to hide/show them

$(".t-tabstrip-items li[id='MCP_tab']").toggle();

[Ahad]

I truly appreciate the assistance. I'm just surprised that I don't have the ability to toggle visibility through the Telerik client-side API, like I'm able to enable/disable tabs or select them if I need, but not affect their visibility - which makes sense now, considering they don't even bother rendering the output if you toggle the visibility to false. I think that's a mistake and should be addressed, but I've got to move on to other things for now. 

Again, you've been a great help!

Thanks,
  Ahad L. Amdani

[John DeVight]

Take a look at this wiki page: http://aspnet.wikidot.com/telerik-mvc:extending-the-telerik-extensions-for-asp-net-mvc

By downloading and referencing the javascript file...

You can show a tab with either of the following jQuery statements:

$('#MyTabStrip').data('tTabStrip').showTab({ text: 'Tab 2' });
$('#MyTabStrip').data('tTabStrip').showTab({ index: 1 });

And you can hide a tab with either of the following jQuery statements:

$('#MyTabStrip').data('tTabStrip').hideTab({ text: 'Tab 2' });
$('#MyTabStrip').data('tTabStrip').hideTab({ index: 1 });