TabStrip - Setting content on a DataSource

2 posts, 1 answers
  1. Lee
    Lee avatar
    37 posts
    Member since:
    Oct 2012

    Posted 19 Dec 2012 Link to this post

    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
  2. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 21 Dec 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
Back to Top