How do I replicate this kendo ui web tabstrip with MVC?

2 posts, 1 answers
  1. Lee Saunders
    Lee Saunders avatar
    20 posts
    Member since:
    Jul 2009

    Posted 09 Jan 2014 Link to this post

                    <div id="tabstrip">
                        <ul>
                            <li>
                                Report #1 <span><a class="k-button" href="#"><span class="k-icon k-i-close"></span></a></span>
                            </li>
                            <li>
                                Report #2 <span><a class="k-button" href="#"><span class="k-icon k-i-close"></span></a></span>
                            </li>
                        </ul>
                        <div>Content of Report #1</div>
                        <div>Content of Report #2</div>
                    </div>

    I've gotten most of it, but I cannot get the k-I-close icon & the k-button in the tab.

                          @(Html.Kendo().TabStrip()
                          .Name("tabstrip")     
                          .Items(items =>
                              {
                                  items.Add().Text("Report #1")
                                       .Content("Content of Report #1");
                                  items.Add().Text("Report #2")
                                       .Content("Content of Report #2");
                              })
                          )

    Any help would be appreciated.
  2. Answer
    Lee Saunders
    Lee Saunders avatar
    20 posts
    Member since:
    Jul 2009

    Posted 10 Jan 2014 Link to this post

    Hello Lee,

    Use .Encoded(false) to be able to include HTML markup as item text. In addition, I recommend you to use a <span> element for the button, because a hyperlink will cause undesired side effects and broken tab layout.

    items.Add()
       .Encoded(false)
       .Text("Report 1 <span class='k-button k-button-icon'><span class='k-icon k-i-close'></span></span>")


    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top