Set tab width on client side

6 posts, 0 answers
  1. Craig
    Craig avatar
    7 posts
    Member since:
    Oct 2008

    Posted 11 Jan 2009 Link to this post

    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?
  2. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 12 Jan 2009 Link to this post

    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.
  3. pucsoftware
    pucsoftware avatar
    24 posts
    Member since:
    Sep 2006

    Posted 09 Sep 2009 Link to this post

    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"; 



  4. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 10 Sep 2009 Link to this post

    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.
  5. pucsoftware
    pucsoftware avatar
    24 posts
    Member since:
    Sep 2006

    Posted 10 Sep 2009 Link to this post

    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?
  6. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 14 Sep 2009 Link to this post

    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.
Back to Top