This is a migrated thread and some comments may be shown as answers.

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

1 Answer 57 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Lee Saunders
Top achievements
Rank 1
Lee Saunders asked on 09 Jan 2014, 07:30 PM
                <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.

1 Answer, 1 is accepted

Sort by
0
Accepted
Dimo
Telerik team
answered on 10 Jan 2014, 01:04 PM
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!
Tags
TabStrip
Asked by
Lee Saunders
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or