Tuesday, September 6, 2016

Kendo UI TabStrip with ASP.NET MVC Partial Views

If you look at the demos for the Kendo UI TabStrip, you will notice that they miss several key scenarios for addressing common issues in ASP.NET MVC Web Applications: http://demos.telerik.com/aspnet-mvc/tabstrip/index

One of the main scenarios the demos fail to address is the usage of Partial Views to render content in the TabStrip control!

Well, after going through some Kendo UI Forums, I was able to come up with this solution:



One of the things that I discovered was that I could not get the TabStrip to work with @{Html.RenderPartial("MVCView1");} and was forced to work with @Html.Partial("MVCView1"). I was not able to figure out the root cause of this discrepancy but if you have a solution to this problem, feel free to post it in the Comments section below!

5 comments:

  1. We tried using your code:
    .Content(@ @Html.Partial("MVCView1") );
    and get an error about it expecting a "using" statement with curly braces.

    ReplyDelete
    Replies
    1. We included the <text></text> tags, too - and I did when I pasted that - but this site makes you use & and lt and & and gt to make the tags...

      Delete
    2. So must've been something wrong with our setup... eventually got it working...

      @(Html.Kendo().TabStrip()
      .Name("tabstrip")

      .Animation(animation =>
      animation.Open(effect =>
      effect.Fade(FadeDirection.In)))

      .Items(tabstrip =>
      {
      tabstrip.Add().Text("Paris")
      .Selected(true)
      .Content(@<text>
      <div class="weather">
      <h2>17<span>ºC</span></h2>
      <p>Rainy weather in Paris.</p>
      <p>@Html.Partial("_Tab1Content")</p>
      </div>
      <span class="rainy"> </span>
      </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>
      <p>@Html.Partial("_Tab1Content")</p>
      <span class="sunny"> </span>
      </text>);

      })
      )
      </div>

      Delete
    3. This site has all of the steps/code for someone else that might find this & be looking for it: https://www.c-sharpcorner.com/article/how-to-use-partial-view-in-different-way-in-mvc/

      Delete
  2. Linking your blog to your code: https://gist.github.com/ssvaidya/43dc8adba7328f1a15a17d0772f62f74

    ReplyDelete