Toolbarbutton selected indication

5 posts, 0 answers
  1. Het
    Het avatar
    31 posts
    Member since:
    Jun 2008

    Posted 19 Sep 2008 Link to this post

    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
  2. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 22 Sep 2008 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Frank
    Frank avatar
    18 posts
    Member since:
    Sep 2008

    Posted 23 Jun 2009 Link to this post

    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.

  5. Frank
    Frank avatar
    18 posts
    Member since:
    Sep 2008

    Posted 23 Jun 2009 Link to this post

    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




  6. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 25 Jun 2009 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017