[Solved] Can you have a Tabstrip inside a Tabstrip ?

[David]

Can you have a Tabstrip inside a Tabstrip ?

I have tried the following but it doesn't work:

<%
    Html.Telerik().TabStrip()
        .Name("TabStrip")
        .Items(items =>
        {
            items.Add().Text("Item 1")
                 .Content(()=>
                 {%>
                     <p>Content</p>
                 <%});
            items.Add().Text("Item 2")
                .Content(() =>
                {%>
                    <!-- START INNER TABSTRIP -->
                    <%
                        Html.Telerik().TabStrip()
                            .Name("TabStrip2")
                            .Items(subitems =>
                            {
                                items.Add().Text("Item 1")
                                    .Content(()=>
                                    {%>
                                        <p>Content</p>
                                    <%});
                                items.Add().Text("Item 2")
                                    .Content(()=>
                                                 {%>
                                                     <p>Content</p>
                                                 <%});
                            })
                            .Render();
                    %>
                    <!-- END INNER TABSTRIP -->
                <%});
        })
        .Render();
%>

Actually it renders like so:

<div class="t-widget t-tabstrip t-header" id="TabStrip"><ul class="t-reset t-tabstrip-items"><li class="t-item t-state-default"><a class="t-link" href="#TabStrip-1">Item 1</a></li><li class="t-item t-state-default"><a class="t-link" href="#TabStrip-2">Item 2</a></li></ul><div class="t-content" id="TabStrip-1">

                     <p>Content</p>

                 </div><div class="t-content" id="TabStrip-2">

                Here

                    <br />

                    <!-- START INNER TABSTRIP -->



                    <!-- END INNER TABSTRIP -->

                    <br />

                    Here

                </div></div>

    </div>

You can see no generated html for where the inner TabStrip was

Just wondering if its possible otherwise I will go different path.

[Atanas Korchev]

Hello David,

 Try this:

<% Html.Telerik().TabStrip()
       .Name("TabStrip")
       .Items(items =>
       {
            items.Add().Text("Item 1").Content(() =>
            {
                %>
                 <p>
                     Content</p>
                 <%
            });
            items.Add().Text("Item 2").Content(() =>
            {
                 Html.Telerik().TabStrip()
                     .Name("TabStrip2")
                     .Items(subitems =>
                     {
                         subitems.Add().Text("Item 1").Content(() =>
                         {
                             %>
                                <p>Content</p>
                             <%
                         });

                         subitems.Add().Text("Item 2").Content(() =>
                         {
                             %>
                                <p>Content</p>
                             <%
                         });
                     })
                     .Render();
            });
       })
       .Render();
 %>

Greetings,
Atanas Korchev
the Telerik team

[Joseph Castillo]

I am trying something similar but it gets stuck.

Any ideas?

@(Html.Telerik().TabStrip()
        .Name("AppsTabstrip")
        .Items(apps =>
                {
                    apps.Add()
                        .ContentHtmlAttributes(new {style = "width:515px; height:350px"})
                        .Visible(true)
                        .Text("ECM")
                        .Content(() =>
                                    Html.Telerik().TabStrip()
                                        .Name("EcmRelated")
                                        .Items(ecmTabs =>
                                                {
                                                    ecmTabs.Add()
                                                            .ContentHtmlAttributes(new {style = "width:515px; height:350px; overflow:auto;"})
                                                            .Text("Sites/Areas/Roles")
                                                            .Content("Some text here");

                                                    ecmTabs.Add().Text("Jobs and Rates")
                                                            .ContentHtmlAttributes(new {style = "width:515px; height:  350px"})
                                                            .Visible(ECM.DAL.Infrastructure.Managers.RightsManager.IsAccountAdmin())
                                                            .Content("Some more text");
                                                }));

                    apps.Add()
                        .ContentHtmlAttributes(new {style = "width:515px; height:350px"})
                        .Visible(true)
                        .Text("BackOffice")
                        .Content("");
                }))

[Daniel]

Hello,

I attached a sample project that demonstrates the possible solutions in order to use a nested a TabStrip. Let me know if the problem occurs in the sample project on your side.

Regards,
Daniel
the Telerik team