toolBar Skin Issue

8 posts, 0 answers
  1. kks
    kks avatar
    30 posts
    Member since:
    Jan 2008

    Posted 01 Feb 2010 Link to this post

    hi,
    I changed my telerik controls to Q3 2009 version.
    i am using skin "Vista" for my toolBar, 

            <telerik:RadToolBar ID="ActionBar" Skin="Vista"  runat="server" Width="100%" EnableEmbeddedSkins="False"
                        Height="25px" >
                        <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
                            <Items>
                                    <telerik:RadToolBarButton runat="server" Text="New" ImageUrl="~/App_Themes/kentz/images/New.png"
                                            Height="25px" Width="70px" Value="New" PostBack="false" CausesValidation="false"
                                            DisabledImageUrl="~/App_Themes/kentz/images/new_disable.png">
                                    </telerik:RadToolBarButton>
                                    <telerik:RadToolBarButton runat="server" IsSeparator="true" Height="25px">
                                    </telerik:RadToolBarButton>
                                    <telerik:RadToolBarButton runat="server" Text="Insert" ImageUrl="~/App_Themes/kentz/images/disk.png"
                                            Height="25px"  Width="70px"   Value="Insert" DisabledImageUrl="~/App_Themes/kentz/images/disk_disable.png">
                                    </telerik:RadToolBarButton>
                                    <telerik:RadToolBarButton runat="server" IsSeparator="true" Height="25px">
                                    </telerik:RadToolBarButton>
                                    <telerik:RadToolBarButton    runat="server" Text="Update"  ImageUrl="~/App_Themes/kentz/images/disk.png"
                                                  Height="25px"  Width="70px"   Value="Update"   DisabledImageUrl="~/App_Themes/kentz/images/disk_disable.png">
                                    </telerik:RadToolBarButton>
                                    <telerik:RadToolBarButton runat="server" IsSeparator="true" Height="25px">
                                    </telerik:RadToolBarButton>
                                    <telerik:RadToolBarButton     runat="server" Text="Delete"  ImageUrl="~/App_Themes/kentz/images/delete.png"
                                        Height="25px"     Width="70px"     CausesValidation="false"     Value="Delete"     DisabledImageUrl="~/App_Themes/kentz/images/delete_disable.png">
                                    </telerik:RadToolBarButton>
                                    <telerik:RadToolBarButton runat="server" IsSeparator="true" Height="25px">
                                    </telerik:RadToolBarButton>
                                    <telerik:RadToolBarButton     runat="server"     Text="Cancel"     ImageUrl="~/App_Themes/kentz/images/cancel.png"
                                            Height="25px" Width="70px" PostBack="false" CausesValidation="false" Value="Cancel"
                                            DisabledImageUrl="~/App_Themes/kentz/images/cancel_disable.png">
                                    </telerik:RadToolBarButton>
                                    <telerik:RadToolBarButton runat="server" IsSeparator="true" Height="25px">
                                    </telerik:RadToolBarButton>
                                    <telerik:RadToolBarButton     runat="server"     Text="Detail"     ImageUrl="~/App_Themes/kentz/images/detail.png"
                                            Height="25px"     Width="70px"     CausesValidation="false"     Value="Detail"     DisabledImageUrl="~/App_Themes/kentz/images/detail_disable.png">
                                    </telerik:RadToolBarButton>
                        </Items>
    </telerik:RadToolBar>

    when a postback is done ( when updating) the toolbar buttons are comming vertically.
    is it any skin issue..?
    after updating iam changing some buttons visible true/false from vb side
        ActionBar.Items(1).Style("display") = "block"
       ActionBar.Items(2).Style("display") = "none"




  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 01 Feb 2010 Link to this post

    Hello kks,

    You can use Visible="false" property to hide Toolbar buttons. Also it seems you are using external skin for the RadToolBar, can you post it here along with any CSS you load and any skin files if you are using themes?

    Best wishes,
    Kamen Bundev
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. kks
    kks avatar
    30 posts
    Member since:
    Jan 2008

    Posted 02 Feb 2010 Link to this post

    hi,
    I am using toolBar in an user control ( this user control i am using in all pages)
    i am using  Visible="false" property to hide Toolbar buttons, because i need the button visible = true through javascript

    my issue happening when a post back happens, once a post back happens the toolbar buttons displays vertically.

    i am pasting the skin file and a sample CSS file ( used for tabstrip) with this.
    please note, i am using IE 8

    PAMMS.skin

    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>  
     
    <asp:TextBox runat="server" CssClass="DefaultTextBox" Height="15px" />  
     
    <asp:TextBox SkinID="numeric" runat="server" CssClass="InputNumeric" Height="15px" width="100px" />  
     
    <asp:TextBox SkinID="date" runat="server" CssClass="InputDate" Height="15px" width="100px" />  
     
    <asp:TextBox SkinID="multi" runat="server" CssClass="DefaultTextBox" />  
     
    <asp:BulletedList SkinID="LeftMenu" runat="server" DisplayMode="LinkButton" CssClass="BulletLink" BulletStyle="Square" />    
     
     <asp:DropDownList runat="server" CssClass="DropDownList" Height="20px" />           
     
    <asp:DetailsView runat="server" AutoGenerateRows="False" 
                    Font-Names="verdana" Font-Size="8.5pt" ForeColor="Black" Height="50px" 
                    Width="450px" BorderStyle="None" BorderColor="#CCCCCC" AllowPaging="True" BorderWidth="0px" 
                    CellPadding="3" GridLines="Horizontal">  
                    <FooterStyle BackColor="White" ForeColor="#000066" />  
                    <RowStyle ForeColor="#525252" Font-Bold="false" CssClass="GridViewRowStyle" BackColor="#F6F6F6" />  
                    <FieldHeaderStyle Font-Bold="True" ForeColor="#525252" Height="16px" VerticalAlign="Top" Width="150px" CssClass="FieldHeaderStyle" />            
        </asp:DetailsView>  
     
     
    <telerik:RadGrid runat="server"   
                     AllowFilteringByColumn="True"   
                     AllowPaging="True" 
                     GridLines="None"   
                     Skin="gvip"   
                     ShowFooter="True" 
                     ShowStatusBar="True" 
                     ClientSettings-EnableRowHoverStyle="true"                                     
                     PagerStyle-Mode="NextPrevNumericAndAdvanced" 
                     EnableLinqExpressions="false" />  
                       
    <telerik:RadPanelBar runat="server"   
                         Skin="gvip"   
                         Width="170px" 
                         ExpandMode="SingleExpandedItem" />  
                           
    <telerik:RadTabStrip runat="server"   
                         Skin="gvip" 
                         CausesValidation="false" />  
                           
    <telerik:RadUpload runat="server"   
                       MaxFileInputsCount="5"   
                       skin="gvip" />  
                         
     <telerik:RadWindowManager runat="server" 
                               Style="z-index: 10000;" />  
       
    <telerik:RadWindow runat="server"   
                        Skin="gvip"   
                        Modal="True" 
                        Style="z-index: 10000;" 
                        Behaviors="Reload,Maximize,Close" 
                        EnableEmbeddedBaseStylesheet="true" />  
              
    <telerik:RadComboBox runat="server" 
                         Skin="gvip"  />  
     
    <telerik:RadMenu runat="server" 
                     Skin="gvip" />  
     
    <telerik:RadEditor runat="server" Skin="gvip" />  
     


    tabstrip.gvip.css

    .RadTabStrip_gvip .rtsLI,  
    .RadTabStrip_gvip .rtsLink  
    {  
        color#000;  
        font12px/26px "Segoe UI"Arialsans-serif;  
    }  
     
    .RadTabStrip_gvip .rtsLevel1 .rtsLI,  
    .RadTabStrip_gvip .rtsLevel1 .rtsLink  
    {  
        color#00156e;  
    }  
     
    .RadTabStrip_gvip .rtsLevel .rtsLink:hover,  
    .RadTabStrip_gvip .rtsLevel .rtsSelected,  
    .RadTabStrip_gvip .rtsLevel .rtsSelected:hover  
    {  
        text-decorationunderline;  
    }  
     
    .RadTabStrip_gvip .rtsLevel1 .rtsLink:hover,  
    .RadTabStrip_gvip .rtsLevel1 .rtsSelected,  
    .RadTabStrip_gvip .rtsLevel1 .rtsSelected:hover  
    {  
        text-decorationnone;  
    }  
     
    .RadTabStripLeft_gvip .rtsSeparator,  
    .RadTabStripRight_gvip .rtsSeparator  
    {  
        background#8DB2E3;  
    }  
     
    /* <disabled tabs> */ 
    .RadTabStrip_gvip .rtsLevel .rtsDisabled  
    {  
        color#666;  
    }  
    /* </disabled tabs> */ 
     
    /* <scrolling arrows> */ 
    .RadTabStrip_gvip .rtsNextArrow,  
    .RadTabStrip_gvip .rtsPrevArrow,  
    .RadTabStrip_gvip .rtsPrevArrowDisabled,  
    .RadTabStrip_gvip .rtsNextArrowDisabled  
    {  
        background-imageurl('TabStrip/TabStripStates.png');  
    }  
    /* </scrolling arrows> */ 
     
    /* <tab backgrounds> */ 
     
    .RadTabStrip_gvip .rtsLevel { background#ccdbee; }  
     
    .RadTabStrip_gvip .rtsLevel1 { background-color#bfdbff; }  
    .RadTabStripTop_gvip .rtsLevel2 { background#ccdbee url('TabStrip/Level2Bg.png'repeat-x 0 0; }  
     
    .RadTabStripTop_gvip .rtsLevel .rtsLink,  
    .RadTabStripTop_gvip .rtsLevel .rtsOut { background-imagenone; }  
     
    .RadTabStripTop_gvip .rtsLevel1 .rtsLink,  
    .RadTabStripTop_gvip .rtsLevel1 .rtsOut,  
    .RadTabStripBottom_gvip .rtsLevel1 .rtsLink,  
    .RadTabStripBottom_gvip .rtsLevel1 .rtsOut,  
    .RadTabStripTop_gvip .rtsLevel1,  
    .RadTabStripBottom_gvip .rtsLevel1 { background-imageurl('TabStrip/TabStripStates.png'); }  
     
    .RadTabStripLeft_gvip .rtsLink,  
    .RadTabStripRight_gvip .rtsLink { background-imageurl('TabStrip/TabStripVStates.png'); }  
     
    .RadTabStripLeft_gvip .rtsLast .rtsLink,  
    .RadTabStripRight_gvip .rtsLast .rtsLink  
    {  
        border-bottom1px solid #898C95;  
    }  
     
    .RadTabStripRight_gvip .rtsLink,  
    .RadTabStripRight_gvip .rtsLI .rtsDisabled:hover { background-position: 100% 0; }  
    .RadTabStripRight_gvip .rtsLink:hover { background-position: 100% -200px; }  
    .RadTabStripRight_gvip .rtsSelected,  
    .RadTabStripRight_gvip .rtsSelected:hover { background-position: 100% -400px; }  
    /* </tab backgrounds> */ 
     
     
    /* <background positioning: tabs with hovers> */ 
     
    /* <orientation: top> */ 
     
    .RadTabStripTop_gvip .rtsLevel1 .rtsLink { background-position: 0 0; }  
    .RadTabStripTop_gvip .rtsLevel1 .rtsOut { background-position: 100% 0; }  
     
    .RadTabStripTop_gvip .rtsLevel1 .rtsLink:hover { background-position: 0 -52px; }  
    .RadTabStripTop_gvip .rtsLevel1 .rtsLink:hover .rtsOut { background-position: 100% -52px; }  
     
    .RadTabStripTop_gvip .rtsLevel1 .rtsSelected,  
    .RadTabStripTop_gvip .rtsLevel1 .rtsSelected:hover { background-position: 0 -26px; }  
    .RadTabStripTop_gvip .rtsLevel1 .rtsSelected .rtsOut,  
    .RadTabStripTop_gvip .rtsLevel1 .rtsSelected:hover .rtsOut { background-position: 100% -26px; }  
     
    .RadTabStripTop_gvip .rtsLevel1 .rtsDisabled:hover { background-position: 0 0; }  
    .RadTabStripTop_gvip .rtsLevel1 .rtsDisabled:hover .rtsOut { background-position: 100% 0; }  
     
    .RadTabStripTop_gvip .rtsLevel1 { background-position: 0 100%; background-repeatrepeat-x; }  
     
    /* </orientation: top> */ 
     
    /* <orientation: bottom> */ 
     
    .RadTabStripBottom_gvip .rtsLevel1 .rtsLink { background-position: 0 -182px; }  
    .RadTabStripBottom_gvip .rtsLevel1 .rtsOut { background-position: 100% -182px; }  
     
    .RadTabStripBottom_gvip .rtsLevel1 .rtsLink:hover { background-position: 0 -130px; }  
    .RadTabStripBottom_gvip .rtsLevel1 .rtsLink:hover .rtsOut { background-position: 100% -130px; }  
     
    .RadTabStripBottom_gvip .rtsLevel1 .rtsSelected,  
    .RadTabStripBottom_gvip .rtsLevel1 .rtsSelected:hover { background-position: 0 -156px; }  
    .RadTabStripBottom_gvip .rtsLevel1 .rtsSelected .rtsOut,  
    .RadTabStripBottom_gvip .rtsLevel1 .rtsSelected:hover .rtsOut { background-position: 100% -156px; }  
     
    .RadTabStripBottom_gvip .rtsLevel1 .rtsDisabled:hover { background-position: 0 -182px; }  
    .RadTabStripBottom_gvip .rtsLevel1 .rtsDisabled:hover .rtsOut { background-position: 100% -182px; }  
     
    .RadTabStripBottom_gvip .rtsLevel1 { background-position: 0 -599pxbackground-repeatrepeat-x; }  
     
    /* </orientation: bottom> */ 
     
    /* <orientation: right> */ 
     
    .RadTabStripRight_gvip .rtsUL .rtsLink,  
    .RadTabStripRight_gvip .rtsUL .rtsLI .rtsDisabled:hover { background-position: 100% 0; text-alignleft; }  
    .RadTabStripRight_gvip .rtsUL .rtsLink:hover { background-position: 100% -200px; }  
    .RadTabStripRight_gvip .rtsUL .rtsSelected,  
    .RadTabStripRight_gvip .rtsUL .rtsSelected:hover { background-position: 100% -400px; }  
     
    /* </orientation: right> */ 
     
    /* </background positioning: tabs with hovers> */ 

     

     


  5. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 04 Feb 2010 Link to this post

    Hi kks,

    Try setting the display style to inline-block instead of block:
    radToolBar2.Items(1).Style("display") = "inline-block"
    Note that this will only work in modern browsers - IE8, FF3+, Safari, Chrome.

    Greetings,
    Kamen Bundev
    the Telerik team

    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
    Follow the status of features or bugs in PITS and vote for them to affect their priority.
  6. kks
    kks avatar
    30 posts
    Member since:
    Jan 2008

    Posted 03 Mar 2010 Link to this post

    its not working.

    can you please do some research on this,
    when making a toolbar button display="none" or display = "block" from server side, why the orientation of toolBar is changing.
    (I mean when i am changing the display property my toolbar buttons are comming vertically. ( before it was horizondally))
  7. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 08 Mar 2010 Link to this post

    Hello kks,

    Yes, that's why it should be set to inline-block.

    Best wishes,
    Kamen Bundev
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  8. kks
    kks avatar
    30 posts
    Member since:
    Jan 2008

    Posted 14 Mar 2010 Link to this post

    hi telerik

    when i changed to inline-block also, its not working
    and as per you, inline block will work only on IE8, but my application is going to work on IE 7 also.

    when i changed my telerik controls to Q3 2009 version. this happend. before it was working fine.
    is anybody able to stimulate this issue..? because i am using this toolbar in whole project

    expecting a solution from telerik
  9. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 17 Mar 2010 Link to this post

    Hello kks,

    Then you can use CssClass to assign two specific classes - one for when the button is visible and one for when it is hidden. Add this CSS to your page:
    div.RadToolBar .rtbInline
    {
        display: inline-block;
        *display: inline;
    }
    div.RadToolBar .rtbHidden
    {
        display: none;
    }


    Then set it from code-behind like this:
    radToolBar2.Items(1).CssClass = "rtbInline"
    and
    radToolBar2.Items(1).CssClass = "rtbHidden"

    Tested and works in all browsers.

    Regards,
    Kamen Bundev
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017