Can RadToolBarSplitButton Look "selected"?

[Doug Rutledge]

Is there an easy way to make the RadToolBarSplitButton look/act like a regular RadToolBarButton when one of its items are selected?  I want to use a couple of RadToolBarSplitButtons with a RadToolBarButton and be able to have it act and look like I'm using three RadToolBarButtons that are in the same group.  I have them unchecking the RadToolBarButton when on of the SplitBarButtons are selected, but the RadToolBarSplitButtons don't look "selected" like the regular tool bar buttons when they are pressed.

Here is what I have.

<telerik:RadToolBar runat="server" style="display:block; float: none" Skin="WebBlue" ID="tbInventory">
    <Items>
        <telerik:RadToolBarButton Group="Inventory" CheckOnClick="true" Text="Pending"></telerik:RadToolBarButton>
        <telerik:RadToolBarButton IsSeparator="true"></telerik:RadToolBarButton>
        <telerik:RadToolBarSplitButton >
            <Buttons>
                <telerik:RadToolBarButton Group="Inventory" CheckOnClick="true" Text="Sold: Last 30 Days"></telerik:RadToolBarButton>
                <telerik:RadToolBarButton Group="Inventory" CheckOnClick="true" Text="Sold: Last 60 Days"></telerik:RadToolBarButton>
                <telerik:RadToolBarButton Group="Inventory" CheckOnClick="true" Text="Sold: Last 90 Days"></telerik:RadToolBarButton>
            </Buttons>
        </telerik:RadToolBarSplitButton>
        <telerik:RadToolBarButton IsSeparator="true"></telerik:RadToolBarButton>
        <telerik:RadToolBarSplitButton>
            <Buttons>
                <telerik:RadToolBarButton Group="Inventory" CheckOnClick="true" Text="For Sale"></telerik:RadToolBarButton>
                <telerik:RadToolBarButton Group="Inventory" CheckOnClick="true" Text="For Sale: Not At TDA"></telerik:RadToolBarButton>
                <telerik:RadToolBarButton Group="Inventory" CheckOnClick="true" Text="For Sale: Not Listed"></telerik:RadToolBarButton>
            </Buttons>
        </telerik:RadToolBarSplitButton>
    </Items>
</telerik:RadToolBar>

Any ideas?
Doug

[Alex Gyoshev]

Hi Doug Rutledge,

You can use the following CSS to achieve the desired look:

.RadToolBar_WebBlue .rtbChecked
{
    background: #f0f2f4;
    color: #00156e;
}

Sincerely yours,
Alex
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[kbtech]

HI,

I'm trying to achive the same but i'm unable to get the css you've recommended to work.

I have a masterpage in which i've defined the css and i have my radtoolbar, but the css isn't applied which a radtoolbarbutton is clicked.

This is my master page

<%

@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

 

<!

 

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<

 

html xmlns="http://www.w3.org/1999/xhtml">

 

<

 

head id="Head1" runat="server">

 

 

<title></title>

 

 

<telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />

 

 

<style type="text/css">

 

 

.RadToolBar_WebBlue .rtbChecked

 

{

 

background: #f0f2f4;

 

 

color: #00156e;

 

}

 

.rtbChecked .rtbText {

 

 

font-weight:bold !important;

 

}

 

</style>

 

</

 

head>

 

<

 

body>

 

 

<form id="form2" runat="server">

 

 

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

 

 

<Scripts>

 

 

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

 

 

</Scripts>

 

 

</telerik:RadScriptManager>

 

 

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

 

 

</telerik:RadAjaxManager>

 

 

<telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="false" Skin="WebBlue">

 

 

<TargetControls>

 

 

<telerik:TargetControl ControlID="RadComboBox1" Skin="Vista" />

 

 

<telerik:TargetControl ControlID="RadEditor1" Skin="Vista" />

 

 

<telerik:TargetControl ControlID="RadDatePicker1" Skin="WebBlue" />

 

 

<telerik:TargetControl ControlID="RadNumericTextBox1" Skin="Outlook" />

 

 

<telerik:TargetControl ControlID="RadTreeView1" Skin="WebBlue" />

 

 

<telerik:TargetControl ControlID="RadMenu1" Skin="Outlook" />

 

 

<telerik:TargetControl ControlID="RadTabStrip1" Skin="Sunset" />

 

 

<telerik:TargetControl ControlID="RadPanelBar1" Skin="Hay" />

 

 

</TargetControls>

 

 

</telerik:RadSkinManager>

 

 

<div>

 

 

<telerik:RadToolBar ID="RadToolBar1" runat="server" Width="100%">

 

 

<Items>

 

 

<telerik:RadToolBarButton runat="server" Text="Quotations" NavigateUrl="~/Default.aspx" >

 

 

</telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton IsSeparator="True" runat="server"></telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" Text="Boat Setup" NavigateUrl="~/Boats.aspx">

 

 

</telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton IsSeparator="True" runat="server"></telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" Text="Options Setup" NavigateUrl="~/Options.aspx">

 

 

</telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton IsSeparator="True" runat="server"></telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" Text="Dealer Options Setup" NavigateUrl="~/DealerOptions.aspx">

 

 

</telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton IsSeparator="True" runat="server"></telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton runat="server" Text="Users Setup" NavigateUrl="~/Users.aspx">

 

 

</telerik:RadToolBarButton>

 

 

<telerik:RadToolBarButton IsSeparator="True" runat="server"></telerik:RadToolBarButton>

 

 

</Items>

 

 

</telerik:RadToolBar>

 

 

<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">

 

 

</asp:contentplaceholder>

 

 

</div>

 

 

</form>

 

</

 

body>

 

</

 

html>

 

Any idea's?

Cheers Paul.