How to set different styles for each tab in a AjaxControlToolKit TabContainer

Fuente: a nil value.
4 del 10 de 2010

It's been a long time since i last wrote in this blog, but today I have wanted to write about a simple styling tip. It's well known to everyone that, in order to style the TabContainer's tabs, you can use the control properties, but these properties are sort of limited, and if you would like something more complex you will find out that the control won't support it.

In this case we will see how we can specify different styles for every tab in the TabContainer, in case you would like to set, for example, alternative colours for the tabs.

To do this you need to get inside the post-rendered TabContainer nodes using javascript, find the right element and overwrite its current style.

Let's see a simple script that will enable us to do this:


Sys.Application.add_load(PageLoad);
function PageLoad()
{
     var tabCont = $find('');
     var tabs = tabCont.get_tabs();
     for(i=0;i<tabs.length;i++){
        if((i+1)%2 == 0){
           Sys.UI.DomElement.addCssClass(tabs[i]._headerOuterWrapper,"ajax__tab_outer_alt");
       }
    }
}

What we are doing here is pretty simple. The "Sys.Application.add_load(PageLoad);" statement ensures that this script is launched when the whole page has already been loaded.

In the PageLoad function we first retrieve the TabContainer control. $find is an AjaxControlToolkit's function to get DOM access to ajax controls, and "" will help us get the control ID that is displayed in the final HTML.

The rest of the code will just get all the Tabs within the TabContainer and loop through them, checking whether its index is a pair number or not, and in case it is, overwriting the new css style to that element, using "Sys.UI.DomElement.addCssClass" function.

"ajax__tab_outer_alt" is the name of the css class we are going to replace the current one with, so you must be sure that this class exists on the current CSS file.

NOTE: There is also a removeCssClass function, but trying to remove the style and add another one later will result in odd behavior, so it's recommended to just overwrite the current style instead.

You can debug this script and get deeper into the TabContainer or any other AjaxControlToolkit element, to change properties after rendering has already happened.

Thanks for reading.