Hi,
Here's my scenario.
I have a diagram (3rd party control) and when a user selects a shape I want to highlight its properties in a toolbar (Telerik), which is also used to set the properties. So it needs to serve a dual purpose.
In particular, I need the appropriate RadToolBarButton item to be selected/highlighted in the RadToolBarSplitButton dropdowns. The value and image associated with the split button itself must not change.
For example, we have a splitbutton that allows the user to select the line style.
If the user selects a line, they would then open the dropdown to see what style had been applied to that line. The "button" would continue to show the last style that was selected and would apply that style should the user click it.
I hope that's clear.
Here's my declaration of the splitbutton:
<telerik:RadToolBarSplitButton runat="server" Value="#style#1#5 0" ToolTip="Connector Style" EnableDefaultButton="False" ImageUrl="Images/Navvia/line-1px.png"> <Buttons> <telerik:RadToolBarButton runat="server" Text="Thin Solid" Value="#style#1#5 0" ImageUrl="Images/Navvia/line-1px.png" Width="130px"> </telerik:RadToolBarButton> <telerik:RadToolBarButton runat="server" Text="Thin Dotted" Value="#style#1#3 3" ImageUrl="Images/Navvia/dotted-1px.png"> </telerik:RadToolBarButton> <telerik:RadToolBarButton runat="server" Text="Thin Dashed" Value="#style#1#7 7" ImageUrl="Images/Navvia/dashed-1px.png"> </telerik:RadToolBarButton> <telerik:RadToolBarButton runat="server" Text="Medium Solid" Value="#style#3#5 0" ImageUrl="Images/Navvia/line-3px.png"> </telerik:RadToolBarButton> <telerik:RadToolBarButton runat="server" Text="Medium Dotted" Value="#style#3#3 3" ImageUrl="Images/Navvia/dotted-3px.png"> </telerik:RadToolBarButton> <telerik:RadToolBarButton runat="server" Text="Medium Dashed" Value="#style#3#7 7" ImageUrl="Images/Navvia/dashed-3px.png"> </telerik:RadToolBarButton> <telerik:RadToolBarButton runat="server" Text="Thick Solid" Value="#style#5#5 0" ImageUrl="Images/Navvia/line-5px.png"> </telerik:RadToolBarButton> <telerik:RadToolBarButton runat="server" Text="Thick Dotted" Value="#style#5#3 3" ImageUrl="Images/Navvia/dotted-5px.png"> </telerik:RadToolBarButton> <telerik:RadToolBarButton runat="server" Text="Thick Dashed" Value="#style#5#7 7" ImageUrl="Images/Navvia/dashed-5px.png"> </telerik:RadToolBarButton> </Buttons></telerik:RadToolBarSplitButton>
I've tried locating the button to highlight using the following (without success):
function SetSelectedConnectorStyle() { var toolbar1 = $find("<%=RadToolBar1.ClientID%>") var connStyleButton = toolbar1.findItemByValue("#style#5#3 3"); connStyleButton.check();}The above finds the button, but checking it does not show any visual indication that it is selected when the dropdown is expanded.
Any suggestions?
Thanks in advance for any assistance.
Jim
6 Answers, 1 is accepted
The default value of the CheckOnClick property of the RadToolBarButtons is False. So if you don't change this to be true, the client-side method .check() will not check the button. However I tested the RadToolBarButtons with CheckOnClick="true" in a RadToolBarSplitButton and the CSS class "rtbChecked" is rendered correctly to the checked button, but there are actually no styles applied. This could be a bug in the RadToolBar and I will investigate it. For a workaround, you can add custom styles for the "rtbChecked" class. For example try the following:
<head runat="server"> <title></title> <style> li.rtbItem.rtbChecked { background-color: bisque; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager runat="server" /> <div> <telerik:RadToolBar ID="RadToolBar1" runat="server" EnableRoundedCorners="true" EnableShadows="true" RenderMode="Lightweight"> <Items> <telerik:RadToolBarSplitButton EnableDefaultButton="false" Text="Split button"> <Buttons> <telerik:RadToolBarButton Text="Bold" ImageUrl="~/images/bold.gif" CheckOnClick="true" AllowSelfUnCheck="true"> </telerik:RadToolBarButton> <telerik:RadToolBarButton Text="Italic" ImageUrl="~/images/italic.gif" CheckOnClick="true" AllowSelfUnCheck="true"> </telerik:RadToolBarButton> <telerik:RadToolBarButton Text="Underline" ImageUrl="~/images/underline.gif" CheckOnClick="true" AllowSelfUnCheck="true"> </telerik:RadToolBarButton> </Buttons> </telerik:RadToolBarSplitButton> </Items> </telerik:RadToolBar> </div> </form>Here you may find a short video, showing how this example looks at my side.
Hope this will be helpful.
Regards,
Aneliya Petkova
Telerik
Rank 2
Hi Aneliya,
The style you provided worked just fine - even if it is a workaround.
Thanks for the prompt reply.
Jim
Rank 1
Veteran
Iron
I have run into this issue too, but using RadToolbarDropdown instead of the ​Splitbutton. I don't set the "Checked" property client-side. I just set it in the toolbar button declaration. There is no indication that the button is checked.
I would like to have a Dropdown with a number of buttons, each of which can be "checked" on/off. When ​a buttons ​is "checked" , I would like for it to show an actual checkmark. I thought this was the default behavor. Is it? Is there a fix or a way to accomplish this?
Please consider the following implementation( I think that this is the easiest way to achieve the scenario, but surely there are other approaches - using templates or custom attributes):
.aspx:
<telerik:RadToolBar ID="RadToolBar1" runat="server" EnableRoundedCorners="true" AutoPostBack="true" EnableShadows="true" OnButtonClick="RadToolBar1_ButtonClick"> <Items> <telerik:RadToolBarDropDown Text="RadToolBarDropDown"> <Buttons> <telerik:RadToolBarButton Text="Bold" AllowSelfUnCheck="true"> </telerik:RadToolBarButton> <telerik:RadToolBarButton Text="Italic" AllowSelfUnCheck="true"> </telerik:RadToolBarButton> <telerik:RadToolBarButton Text="Underline" AllowSelfUnCheck="true"> </telerik:RadToolBarButton> </Buttons> </telerik:RadToolBarDropDown> </Items></telerik:RadToolBar>.aspx.cs:
protected void RadToolBar1_ButtonClick(object sender, RadToolBarEventArgs e){ if (((RadToolBarButton)e.Item).Checked) { ((RadToolBarButton)e.Item).Checked = false; e.Item.ImageUrl = string.Empty; } else { ((RadToolBarButton)e.Item).Checked = true; e.Item.ImageUrl = "Images/checked.gif"; }}Attached you may find a sample project. I also recorded a video showing the result of my test:
Hope this will be helpful.
Regards,
Aneliya Petkova
Telerik
Rank 1
Veteran
Iron
Please check the following help article where the purpose of "Two state buttons" is really well explained:
In the example I made for you, I use Checked property to set the checked state of the buttons if you need to do something with it (for example if you want rtbChecked class to be rendered on the buttons or to use OnClientCheckedStateChanging or OnClientCheckedStateChanged events). However you can change the code to meet your requirements. Also as I mentioned in my previous post, you could achieve this scenario using other approaches, it really depends on what you need.
Regards,
Aneliya Petkova
Telerik