Rad Tab Text style change

3 posts, 0 answers
  1. suresh
    suresh avatar
    8 posts
    Member since:
    Oct 2008

    Posted 19 May 2009 Link to this post

    Hi,

    my question is can i change the color of a rad tab text in client side.... if it is possible how..??????....  i have 5 tabs i need to change the color of each tab according to my condition.


    Thanks in advance,



    Regards,
    Suresh S
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 20 May 2009 Link to this post

    Hello Suresh,

    Try the following client side code for changing the color of RadTab text.

    JavaScript:
     
    <script type="text/javascript" language="javascript"
    function ChangeColor(sender, eventArgs) 
        var tabStrip = $find("<%= RadTabStrip1.ClientID %>"); 
        var tab = tabStrip.findTabByText('Root RadTab1 with long text'); 
        if(condition) // Condition 
        { 
            tab.get_textElement().style.color = 'Green'
        } 
    </script> 




    Thanks,
    Shinu.
  3. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 21 May 2009 Link to this post

    Hi Suresh,

    Please find below a sample code snippet that shows the needed approach.

    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head runat="server">  
        <title></title>  
        <style type="text/css">  
            .red  
            {  
                color: Red !important;  
            }  
        </style> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
        <asp:ScriptManager ID="ScriptManager1" runat="server">  
        </asp:ScriptManager> 
     
        <script type="text/javascript">  
            function changeColor() {  
                var tabStrip = $find('<%= RadTabStrip1.ClientID %>');  
                var tab = tabStrip.findTabByText("Root RadTab2");  
                if (tab) // Condition    
                {  
                    tab.set_cssClass("red");  
                }  
            }    
        </script> 
     
        <telerik:RadTabStrip ID="RadTabStrip1" runat="server">  
            <Tabs> 
                <telerik:RadTab runat="server" Text="Root RadTab1">  
                </telerik:RadTab> 
                <telerik:RadTab runat="server" Text="Root RadTab2">  
                </telerik:RadTab> 
                <telerik:RadTab runat="server" Text="Root RadTab3">  
                </telerik:RadTab> 
                <telerik:RadTab runat="server" Text="Root RadTab4">  
                </telerik:RadTab> 
                <telerik:RadTab runat="server" Text="Root RadTab5">  
                </telerik:RadTab> 
            </Tabs> 
        </telerik:RadTabStrip> 
        <input id="Button1" type="button" value="button" onclick="changeColor()" /> 
        </form> 
    </body> 
    </html> 


    Greetings,
    Paul
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
Back to Top