toolBar Skin Issue

[kks]

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"

[Kamen Bundev]

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.

[kks]

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;
    font: 12px/26px "Segoe UI", Arial, sans-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-decoration: underline;
}

.RadTabStrip_gvip .rtsLevel1 .rtsLink:hover,
.RadTabStrip_gvip .rtsLevel1 .rtsSelected,
.RadTabStrip_gvip .rtsLevel1 .rtsSelected:hover
{
    text-decoration: none;
}

.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-image: url('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-image: none; }

.RadTabStripTop_gvip .rtsLevel1 .rtsLink,
.RadTabStripTop_gvip .rtsLevel1 .rtsOut,
.RadTabStripBottom_gvip .rtsLevel1 .rtsLink,
.RadTabStripBottom_gvip .rtsLevel1 .rtsOut,
.RadTabStripTop_gvip .rtsLevel1,
.RadTabStripBottom_gvip .rtsLevel1 { background-image: url('TabStrip/TabStripStates.png'); }

.RadTabStripLeft_gvip .rtsLink,
.RadTabStripRight_gvip .rtsLink { background-image: url('TabStrip/TabStripVStates.png'); }

.RadTabStripLeft_gvip .rtsLast .rtsLink,
.RadTabStripRight_gvip .rtsLast .rtsLink
{
    border-bottom: 1px 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-repeat: repeat-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 -599px; background-repeat: repeat-x; }

/* </orientation: bottom> */

/* <orientation: right> */

.RadTabStripRight_gvip .rtsUL .rtsLink,
.RadTabStripRight_gvip .rtsUL .rtsLI .rtsDisabled:hover { background-position: 100% 0; text-align: left; }
.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> */

 

 

[Kamen Bundev]

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.

[kks]

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))

[Kamen Bundev]

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.

[kks]

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

[Kamen Bundev]

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.