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

TabStrip - Setting content on a DataSource

1 Answer 201 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Lee
Top achievements
Rank 1
Lee asked on 19 Dec 2012, 04:51 PM
I am just starting to play around with the TabStrip and I am facing the following issues:

1) When using only HTML to configure the TabStrip (and not using a DataSource) I cannot determine how to set the icon for each tab

2) When using the DataSource to configure the TabStrip I cannot determine how to set complex content (HTML) into the object. All of the examples I have seen set just a simple string value into the 'content' property of the elements in the array set as the dataSource ...


Can anyone help me out with the above two issues?


Thanks!

- Lee

1 Answer, 1 is accepted

Sort by
0
Accepted
Alexander Valchev
Telerik team
answered on 21 Dec 2012, 01:52 PM
Hi Lee,

Regarding your questions:

1) When using only HTML to configure the TabStrip (and not using a DataSource) I cannot determine how to set the icon for each tab.

You can simply include a <img> element in the mark-up of the tabs. Here is an example.
<ul>
    <li class="k-state-active">
      <img src="icons/sports/baseball.png" />
      Paris
    </li>
    <li>
      <img src="icons/sports/golf.png" />
      New York
    </li>
</ul>

2) When using the DataSource to configure the TabStrip I cannot determine how to set complex content (HTML) into the object.

One possible way is to define the html in a <script> element (like template) and get its content when the data is created. Example:

<script type="text/x-kendo-template" id="content">
    <!-- html code -->
</script>
dataSource: [{
    text: "Item1",
    content: $("#content").html()
}]

I hope this will help.

Regards,
Alexander Valchev
the Telerik team
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
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Share this question
or