Load Kendo TabStrip with available content

Question

I have three tabs and I would like to populate those tabs with section contents that is already present on the page:

<section class="rbs-section" id="rbi_S_12466479" name="world1">
<p>Hello World1</p>
</section>

<section class="rbs-section" id="rbi_S_12466477" name="world2">
<p>Hello World2</p>
</section>

<section class="rbs-section" id="rbi_S_12466478" name="world3">
<p>Hello World3</p>
</section>

My TabStrip:

<div id="tabstrip">
                            <ul>
                                <li class="k-state-active">
                                    World1
                                </li>
                                <li>
                                    World2                                    </li>
                                <li>
                                    Wordl3
                                </li>
                            </ul>
                        </div>

Javascript:

$(document).ready(function() {
                    $("#tabstrip").kendoTabStrip({
                        animation:  {
                            open: {
                                effects: "fadeIn"
                            }
                        }
                    });
                });

How can I use Kendo TabStrip code to use my custom sections in those tabs? Kindly let me know.

Cheers.

David Shorthose David Shorthose · Accepted Answer · 2015-09-02T11:14:08

here is a dojo with a working example. Tab strip with sections.

You will notice that all I have done is wrap you sections with a div.

the tab strip expects to see a div within the content collection as the child element i.e. the content.

hopefully this answers your question. If you need any further details let me know.

UPDATE

I have updated the dojo. It is not the most elegant way of doing it but it will work without you changing your DOM to much.

updated dojo

UPDATE 2 updated dojo 2

Load Kendo TabStrip with available content

1 Answers