This is a migrated thread and some comments may be shown as answers.

Toolbarbutton selected indication

4 Answers 177 Views
ToolBar
This is a migrated thread and some comments may be shown as answers.
Het
Top achievements
Rank 1
Het asked on 19 Sep 2008, 08:09 PM
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

4 Answers, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 22 Sep 2008, 11:36 AM
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.
0
Frank
Top achievements
Rank 2
answered on 23 Jun 2009, 07:52 AM
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.

0
Frank
Top achievements
Rank 2
answered on 23 Jun 2009, 08:41 AM
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 ObjectByVal 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




0
Yana
Telerik team
answered on 25 Jun 2009, 02:37 PM
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 ObjectByVal 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-imageurl('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.
Tags
ToolBar
Asked by
Het
Top achievements
Rank 1
Answers by
Yana
Telerik team
Frank
Top achievements
Rank 2
Share this question
or