Loading KendoUI Tabstrip Using Partial

Question

Does anybody know if it is possible to load a tabstrip by making an Ajax request to a controller that returns a Partial like you can do with a KendoUI Window control?

If not I will simply do an AJAX request to get my PartialViewResult and then set the use jQuery to set the html of the div. But would be good to know if it can be done using the tabstrip API.

I have tried the following as per the KendoUI documentation but it doesn’t seem to work.

<div id="tabstrip">
    <ul>
        <li class="k-state-active">Tab 1</li>
        <li>Tab 2</li>
        <li>Tab 3</li>
    </ul>
</div>

<script>
    $(document).ready(function () {
        $("#tabstrip").kendoTabStrip({
            animation: { open: { effects: "fadeIn"} },
            contentUrls: [
                        'myController/myAction/id1',
                        'myController/myAction/id2',
                        'myController/myAction/id3'
                    ]
        });
    });
</script>

Any ideas would be much appreciated.

Cragly

Answer 1

Basically what I would suggest is to initialize the widget (without such content URLs) and then invoke the append method immediately like shown here.

tabStrip.append(
[{
    text: "Item 1",
    url: "http://www.kendoui.com"               // Link URL if navigation is needed, optional.
},
{
    text: "<b>Item 2</b>",
    encoded: false,                             // Allows use of HTML for item text
    content: "text"                             // Content for the content element
},
{
    text: "Item 3",
    contentUrl: "partialContent.html"           // From where to load the item content
},
{
    text: "Item 4",
    imageUrl: "http://www.kendoui.com/test.jpg" // Item image URL, optional.
},
{
    text: "Item 5",
    spriteCssClass: "imageClass3"               // Item image sprite CSS class, optional.
}]
);

Answer 2

I could not find a way in the end to get this to work with the control itself so I came up with my own solution to the problem which was to request the partial in an ajax request and then simply update the div content for the specific tab.

function loadTabContent() {
    $.ajax({
        type: 'GET',
        url: '/myControllerName/Action',
        async: false,
        data: { id: itemId },
        success: function (data) {
            $('#myTabStripTabStrip-2').html(data);
        }
    });
}

Hopefully it may help others who have the same issue.

Thanks again for all that helped me out with this one.