[Solved] Toolbarbutton selected indication

[Het]

Telerik Support,

I have Toolbar with some buttons. I have a toolbardropdown and toolbarsplitbutton, inside I have 2 buttons. Now when I select any one of them there should be a indication of which is selected, like a tick sign or something. I am not able to find any propery in toolbar out of box. Is there any property available to do so, or else how can we achive it ?

Below is the code for my toolbar.

<telerik:RadToolBar ID="tbTopPage" runat="server" Skin="Office2007" Width="100%">
    <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
    <Items>
        <telerik:RadToolBarButton runat="server" Text="Collapse All">
        </telerik:RadToolBarButton>
        <telerik:RadToolBarButton runat="server" IsSeparator="True" Text="Seperator1">
        </telerik:RadToolBarButton>
        <telerik:RadToolBarSplitButton runat="server" Text="Relation"
            EnableDefaultButton="False">
            <Buttons>
                <telerik:RadToolBarButton runat="server" CheckOnClick="True"
                    Text="With Relation" ValidationGroup="Relation">
                </telerik:RadToolBarButton>
                <telerik:RadToolBarButton runat="server" CheckOnClick="True"
                    Text="Without Relation" Checked="True" ValidationGroup="Relation">
                </telerik:RadToolBarButton>
            </Buttons>
        </telerik:RadToolBarSplitButton>
        <telerik:RadToolBarButton runat="server" IsSeparator="True" Text="Seperator2">
        </telerik:RadToolBarButton>
        <telerik:RadToolBarDropDown runat="server" Text="View">
            <Buttons>
                <telerik:RadToolBarButton runat="server" CheckOnClick="True" Group="View"
                    Text="Summary">
                </telerik:RadToolBarButton>
                <telerik:RadToolBarButton runat="server" CheckOnClick="True" Group="View"
                    Text="Detail">
                </telerik:RadToolBarButton>
            </Buttons>
        </telerik:RadToolBarDropDown>
        <telerik:RadToolBarButton runat="server" IsSeparator="True" Text="Seperator3">
        </telerik:RadToolBarButton>
        <telerik:RadToolBarSplitButton runat="server" Text="Actions"
            EnableDefaultButton="False">
            <Buttons>
                <telerik:RadToolBarButton runat="server" CheckOnClick="True"
                    Text="Add to Basket">
                </telerik:RadToolBarButton>
                <telerik:RadToolBarButton runat="server" CheckOnClick="True"
                    Text="Maintenance Update">
                </telerik:RadToolBarButton>
            </Buttons>
        </telerik:RadToolBarSplitButton>
    </Items>
</telerik:RadToolBar>

Thanks,
Het

[Yana]

Hello Het,

Unfortunately there is no such property for RadToolBar, but you can easily achieve this with the help of css styles. Please check the attached sample files. In the provided example I only set red color as background, but you can set a background image with a tick in your project.

Regards,
Yana
the Telerik team

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

[Frank]

Hello,

The code works fine, but how often do you stay on the same page when clicking the toolbar?

I have master-page with a radtoolbar. Several aspx-pages uses this master-page.
When I click on the toolbar, I want the selected toolbar item to be marked somehow, e.g. by using css - like another background, like the example above.
Since I load a new page, the code from the previous post does not work.

It should be very simple to get this to work, but I am new to the radtoolbar - how can I mark the selected item, when using the toolbar in a master-page?

Thanks in advise,
Frank N.

[Frank]

I just added this code to my master-page, it will automatically mark the current page in the navigation:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

Dim mylinakurl As String = Replace(Request.Url.PathAndQuery.ToLower(), "default.aspx", "")
Dim CurrentButton As RadToolBarButton
CurrentButton = RadToolBar1.FindItemByUrl(mylinakurl)
CurrentButton.Checked = True

End Sub

But, the code dosnt work on child-items in a RadToolBarDropDown. How is that done?

And also I need to check if the CurrentButton was found as item i the toolbar. If not 'CurrentButton.Checked' gives me an error.

Something like:
If hasfoundpageinnavigation(CurrentButton) then
 CurrentButton.Checked = True
end if

So I still have 2 problems with the toolbar. Any ideas?

Frank

[Yana]

Hello Frank,

In case the clicked button is a child of a RadToolBarDropDown I suggest to set cssClass property of the dropdown like this:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        Dim mylinakurl As String = Replace(Request.Url.PathAndQuery.ToLower(), "default.aspx", "")
        Dim CurrentButton As RadToolBarButton
        CurrentButton = RadToolBar1.FindItemByUrl(Request.Url.PathAndQuery)
        If CurrentButton.Parent.GetType().ToString() = "Telerik.Web.UI.RadToolBarDropDown" Then
            CType(CurrentButton.Parent, RadToolBarDropDown).CssClass = "rtbDropDownSelected"
        Else
            CurrentButton.Checked = True
        End If
    End Sub

and "rtbDropDownSelected" css class:

<style type="text/css">
    .RadToolBar_Default .rtbDropDownSelected,
    .RadToolBar_Default .rtbDropDownSelected .rtbOut,
    .RadToolBar_Default .rtbDropDownSelected .rtbMid,
    .RadToolBar_Default .rtbDropDownSelected .rtbIn
     {
        background-image: url('rtbBackground.png');
     }

    .RadToolBar .rtbDropDownSelected
    {
        background-position: 0 100%;
        color: #fff !important;
    }

    .RadToolBar .rtbDropDownSelected .rtbOut
    {
        background-position: 100% 0;
    }

    .RadToolBar .rtbDropDownSelected .rtbMid
    {
        background-position: 100% 100%;
    }

    .RadToolBar .rtbDropDownExpanded .rtbIn
    {
        background-position: 0 0;
    }
</style>

the used in the css image is attached.

Best regards,
Yana
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.