MVC Nested Tabstrips

2 posts, 1 answers
  1. Kahl
    Kahl avatar
    15 posts
    Member since:
    Nov 2016

    Posted 03 May Link to this post

    When I add a simple  @(Html.Kendo().TabStrip()  strip inside a tab freom the main  @(Html.Kendo().TabStrip() it does not work,   I can add grids and other things.

     

    Please advise how to add a  @(Html.Kendo().TabStrip() inside another tab

     

     

    Thanks

     

    Cameron

  2. Answer
    Ivan Danchev
    Admin
    Ivan Danchev avatar
    1332 posts

    Posted 03 May Link to this post

    Hello Cameron,

    Here's an example showing how  TabStrips can be nested:
    @(Html.Kendo().TabStrip()
          .Name("tabstrip")
          .Items(tabstrip =>
          {
            tabstrip.Add().Text("Tab1")
                .Selected(true)
                .Content(tab => Html.Kendo().TabStrip()
                .Name("nestedTabStrip")
                .Items(t =>
                {
                    t.Add()
                        .Text("Nested1")
                        .Selected(true)
                        .Content(@<text>
                            Nested 1 content
                        </text>);
                    t.Add()
                        .Text("Nested2")
                        .Content(@<text>
                            Nested 2 content
                        </text>);
                })
            );
            tabstrip.Add().Text("New York")
                .Content(@<text>
                <div class="weather">
                    <h2>29<span>ºC</span></h2>
                    <p>Sunny weather in New York.</p>
                </div>
                <span class="sunny"> </span>
                </text>);
     
            tabstrip.Add().Text("Moscow")
                .Content(@<text>
                <div class="weather">
                    <h2>16<span>ºC</span></h2>
                    <p>Cloudy weather in Moscow.</p>
                </div>
                <span class="cloudy"> </span>
                </text>);
          })
    )


    Regards,
    Ivan Danchev
    Telerik by Progress
    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