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

[Lee Saunders]

                <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.

[Dimo]

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