CODEWITHSUNDEEP
kendo-ui
user2206329
user2206329

Reputation: 2842

how to use render partial in a kendo ui tab strip

How can I do a tab strip in kendo ui with render partial...

This is what I have been trying

@(Html.Kendo().TabStrip()
          .Name("tabstrip")
          .Items(tabstrip =>
          {
              tabstrip.Add().Text("COES Details")
                  .Selected(true)
                  .Content(@<text>
                    @{Html.RenderPartial("ViewCOESDetails", @Model.COESDetails);}
                  </text>);

              tabstrip.Add().Text("New York")
                  .Content(@<text>
                    <div class="weather">
                        <h2>29<span>&ordm;C</span></h2>
                        <p>Sunny weather in New York.</p>
                    </div>
                    <span class="sunny">&nbsp;</span>
                  </text>);

              tabstrip.Add().Text("Moscow")
                  .Content(@<text>
                    <div class="weather">
                        <h2>16<span>&ordm;C</span></h2>
                        <p>Cloudy weather in Moscow.</p>
                    </div>
                    <span class="cloudy">&nbsp;</span>
                  </text>);

              tabstrip.Add().Text("Sydney")
                  .Content(@<text>
                    <div class="weather">
                        <h2>17<span>&ordm;C</span></h2>
                        <p>Rainy weather in Sidney.</p>
                    </div>
                    <span class="rainy">&nbsp;</span>
                  </text>);
          })
    )

It just shows the page on the outside of the tab... what is the correct syntax...

any ideas?

Thanks

Upvotes: 6

Views: 12848

Answers (3)

TResponse
TResponse

Reputation: 4125

I add multiple partial views to a tab strip. in this case, one partial view per tab:

@(Html.Kendo().TabStrip()
              .Name("Information")
              .Items(tabstrip =>
              {
                  tabstrip.Add().Text("Tab 1")
                  .Selected(true)
                  .Content(Html.Partial("~/Areas/People/Views/Contact/_AustraliaPartial.cshtml", Model.Australia).ToHtmlString());

                  tabstrip.Add().Text("Tab 2 ")
                  .Content(Html.Partial("~/Areas/People/Views/Contact/_NewZealandPartial.cshtml", Model.NewZealand).ToHtmlString());

                  tabstrip.Add().Text("Tab 3")
                  .Content(Html.Partial("~/Areas/People/Views/Contact/_SamoaPartial.cshtml", Model.Tonga).ToHtmlString());

              }))

Upvotes: 6

Robert Achmann
Robert Achmann

Reputation: 2035

It now supports controller/actions

 @(Html.Kendo().TabStrip()
     .Name("tabstrip")
     .Items(tabstrip =>
     {
         tabstrip.Add().Text("File").LoadContentFrom("FileTab","Home");
     })
)

and in the Home Controller:

public ActionResult FileTab()
{
    return PartialView("_FileTabPartial");
}

Hope this helps

Upvotes: 8

amol
amol

Reputation: 81

tabstrip.Add().Text("COES Details").Enabled(true) .Content(@Html.Partial("path of the Partialview", Model).ToHtmlString());

Upvotes: 8

Related Questions