Set tab width on client side

[Craig]

We need to create some tabs on the client side and they need to be specific widths.  There doesn't seem to be a client side set_width() method.

Is there a way to set the width for a tab created via JavaScript?

[Paul]

Hello Craig,

You can easily achieve your goal by either setting CSS class to the tab, i.e.

function  addTab()
{
    var tabStrip = $find("<%= RadTabStrip1.ClientID %>");

    tabStrip.trackChanges();

    var tab = new Telerik.Web.UI.RadTab();
    tabStrip.get_tabs().add(tab);
    tab.set_text("Child Tab " + tabStrip.get_tabs().get_count());
    tab.set_cssClass("t1");

    tabStrip.commitChanges();
}

or by setting the width of the element:

function  addTab()
{
    var tabStrip = $find("<%= RadTabStrip1.ClientID %>");

    tabStrip.trackChanges();

    var tab = new Telerik.Web.UI.RadTab();
    tabStrip.get_tabs().add(tab);
    tab.set_text("Child Tab " + tabStrip.get_tabs().get_count());
    tab.get_element().style.width = "350px";

    tabStrip.commitChanges();
}

Regards,
Paul
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[pucsoftware]

I am trying to the exact same thing but with the BackColor of the tab and I can't get this to work. Can any body help?

works
tab.get_element().style.width = "350px"; 

doesn't work
tab.get_element().style.backgroundColor = "#fffefe"; 

[Alex Gyoshev]

Hi pucsoftware,

Setting the backgroundColor is highly dependent on the skin - since most of them use background images, the property will not work in the scenarios. The Simple skin is the one that supports such modifications out-of-the-box.

Kind regards,
Alex
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[pucsoftware]

I am using the simple skin. Other than changing the default colors for the simple skin I haven't changed anything. I can tell that the property is being set, as when I rolloever the image the background color is being set, but it is behind the element that is the rollover element. This tells me that setting is being made but that the wrong element is being changed. Is there something else I can do? I've tried resetting the class name with classname += " .myclass" but it doesn't quite work. Do have an example that shows this can work?

[Alex Gyoshev]

Hello pucsoftware,

Please refer to the attached website for an example.

Kind regards,
Alex
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.