[Solved] separating tab strip from tab strip content

[Joseph]

Hi,

I am using the telerik tab strip and I would like to separate the ul containing the menu items from the divs that have the content.

ie. at the moment it renders like this:

<div id="tabstrip>
<ul id="tabstrip-items">
<li id="tab-1"></li>
</ul>
<div id="tab-1"></div>
</div>

I would like to be able to take the <ul> and put it in another div elsewhere on the page that will still change the content. Is this possible?

Best Regards,

Jay

[Alex Gyoshev]

Hi Joseph,

You cannot use the Content method to separate the content this way. You can, however,

1. have a TabStrip (without content) on the desired location of the page
2. attach an event handler to the select event
3. handle the change of the tab areas manually in the above event handler

This should result in your desired effect.

Regards,
Alex Gyoshev
the Telerik team

[Joseph]

Thank you for your prompt response.

I have instead made two tabstrips that link to each other, one with the content and a hidden strip, and one with the strip and (trying) to have no content.

How do I make a working strip with no content? I cannot pass Nothing to the .Content property.
I cannot even use css to hide divs as there is overwriting inline css that is being applied by jquery on the tabs.

Best Regards,

Joseph

[John DeVight]

You could override the tabstrip.activateTab event for the instance of the tabstrip that should not display content as well as hide the div's.

If I had a tabstrip called "MyTabStrip" that had 3 tabs, this would be the code:

// Override the activateTab function to no longer display content.
$('#MyTabStrip').data('tTabStrip').activateTab = function(d) {
    var f = d.parent().children().removeClass("t-state-active").addClass("t-state-default").index(d);
    d.removeClass("t-state-default").addClass("t-state-active");
}

// Set the tabstrip height to the height of the tabs.
$('#MyTabStrip').height(25);

// Hide the contents for all the tabs.
$('#MyTabStrip-1').css('display', 'none')
$('#MyTabStrip-2').css('display', 'none')
$('#MyTabStrip-3').css('display', 'none')

Let me know how this turns out....

Regards,

John DeVight
http://aspnet.wikidot.com

[John DeVight]

I've updated my telerik.extensions.js file to include new functions to hide and show content.

An example of hiding the content would be:

$('#MyTabStrip').data('tTabStrip').hideContent();

You can get the telerik.extensions.js file at: Telerik MVC : Extending the Client API

Regards,

John DeVight
http://aspnet.wikidot.com

[nachid]

John,
What about a removeContent function?
Here is the code

$.telerik.tabstrip.removeContent= function()
{
    $('div.t-content', '.t-tabstrip' ).remove();
}

[John DeVight]

I like it! =)

[nachid]

You should then like this too! =)

$.telerik.tabstrip.toggleContent(showOrHide)
{
       $('div.t-content', '.t-tabstrip' ).toggle(showOrHide);
}

showOrHide is a Boolean indicating whether to show or hide the tabstrip content
It is the same used by jQuery toggle method

[nachid]

Actually, I just discovered $contentElements property that should make things easier

// Remove tabstrip content
$.telerik.tabstrip.prototype.removeContent= function()

{

        this.$contentElements.remove();

}

 
// toggle tabstrip content
// showOrHide is a Boolean indicating whether to show or hide the tabstrip content
//It is the same used by the jQuery toggle method


$.telerik.tabstrip.prototype.toggleContent= function(showOrHide)

{

      this.$contentElements.toggle(showOrHide);

}

Example
var myTabstrip =$('#myTabstrip').data('tTabStrip');

// Hide tabstrip content
myTabStrip.toggleContent(false);

// Show tabstrip content back
myTabStrip.toggleContent(true);

//Remove for ever the tabstrip content
myTabStrip.removeContent();