Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > ToolBar > toolBar Skin Issue

• kks

  Posted on Feb 1, 2010 (permalink)

  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"
  
  
  
  
  

  Reply

• Kamen Bundev Kamen Bundev

  Posted on Feb 1, 2010 (permalink)

  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.

  Reply


• kks

  Posted on Feb 2, 2010 (permalink)

  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> */

   

   

  
  

  Reply

• Kamen Bundev Kamen Bundev

  Posted on Feb 4, 2010 (permalink)

  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.

  Reply

• kks

  Posted on Mar 3, 2010 (permalink)

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

  Reply

• Kamen Bundev Kamen Bundev

  Posted on Mar 8, 2010 (permalink)

  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.

  Reply

• kks

  Posted on Mar 14, 2010 (permalink)

  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
  

  Reply

• Kamen Bundev Kamen Bundev

  Posted on Mar 17, 2010 (permalink)

  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.

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > ToolBar > toolBar Skin Issue