Kendo Tab Strip with an Ajax Tab

When using Kendo UI TabStrip, every tab will have its own content element. Any content which is meant for a specific tab should be appended only to that tab's content element.

In your snippet above, you need to first identify the tab's content element to be used instead of  $("#replaceMe4").

Request you to add the following function definition and leverage the same to identify a tab's content element:

function rbf_getTabContentElement(tabIndex){

var kendoConfig = $('div[data-role=tabstrip]').data('kendoTabStrip');

return kendoConfig? kendoConfig.contentElement(tabIndex) : null;

}

Now to get tab content element: rbf_getTabContentElement(2) -> This will return DOM Element for 3rd tab's content element.

Also, success function definition as given above should be revised as follows:

success: function(data) {

  $(rbf_getTabContentElement(2)).append(data);

}

Note: In forthcoming releases, we will have such util methods available in a New UI page by default.

Also, for any Kendo UI library specific queries, you can also refer Kendo UI documentation online.

docs.telerik.com/.../introduction

Hello,

Thank you guys for the replies. I used the function rbf_getTabContentElement  to get the content of the right Tab and then append the ajax content to it and here is what's happening now (and I think this was the behavior I had before as well) :

Only a part of the data returned by Ajax is appended to that div. The remaining part is just appended to end of the page, and this is why it appears under the other Tabs when they are selected.

Here is the DOM after appending the Ajax data :

So as you can see, the div with id = "tabstrip-1" is the one to which the content is appended. But as shown the div with id = "rb-styleable-content-box" is empty, and this maybe has to do with the fact that only the skeleton is returned as you mentioned in the other post.

So the other part of the ajax returned content, and which is normally under the below "rb-styleable-content-box", is been added to the end of the page, but not under the first Tab div, and this is why it is not linked to this div and appears under other Tabs as well :

So the div "k-tabstrip-wrapper" is the one added to the end of the page. and this where the problem comes from. Obviously it looks like we are appending only the skeleton.

Any other suggestions please ? Don't we need to wait for the ajax returned to be completely built before appending it to the Tab's Content div as you suggested ?

Cheers,

Meryem

Regarding,

" So the other part of the ajax returned content, and which is normally under the below "rb-styleable-content-box", is been added to the end of the page, but not under the first Tab div, and this is why it is not linked to this div and appears under other Tabs as well "

Once ajax request completes & you append data to a Tab, there is NO additional returned content.

What you are seeing at the end of page, is added to DOM by client-side scripts that execute when you append ajax response (which contains skeleton html markup & SCRIPTS). If you filter out these scripts from ajax response and just add html mark up to tab, you will NOT see additional content at the end of the page.

Hope this explains, the behavior that you are seeing.

Now coming back to the usecase of loading one page inside another page as tab content, it is not possible to acheive with New UI pages, considering how they are constructed by client-side scripts. You may want to consider using iFrames instead.