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

How to select/highlight an item in a RadToolBarSplitButton dropdown on client

6 Answers 222 Views

ToolBar

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

jlj30 asked on 01 Jun 2015, 09:09 PM

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

Accepted

answered on 02 Jun 2015, 07:04 AM

Hi Jim,

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items

answered on 27 Aug 2015, 08:36 PM

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?

answered on 28 Aug 2015, 10:22 AM

RadToolBarDropDown-CheckMark.zip

Hi Albert,

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

answered on 28 Aug 2015, 11:36 AM

Hmmm. If all I'm doing is handling the toolbar button's click event and dynamically setting it's imageUrl property, then why do the "CheckOnClick" and "AllowSelfUnCheck" properties even exist. They don't seem to serve any purpose. Having them gives the impression that this is supposed to be some sort of built-in functionality, that is, when a button has "Checked" = true, its supposed to display a checkmark. Is this not the purpose of those properties? If not, what is?

answered on 28 Aug 2015, 01:40 PM

Hi Albert,

Please check the following help article where the purpose of "Two state buttons" is really well explained:

http://docs.telerik.com/devtools/aspnet-ajax/controls/toolbar/radtoolbar-items/two-state-buttons

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