Hi,
I have a diagramming application which uses a RadToolBar to set attributes such as Bold, Italic and Underline - pretty standard stuff.
The RadToolBarButton's need to serve a dual purpose:
- To set the attribute (e.g., Bold) of the selected object
- To indicate the attribute setting for the selected object
I am using the check() method of the item to "highlight" it if the selected shape has that attribute set.
Unfortunately it seems that only 1 item can be checked at a time.
How do I go about checking/selecting/highlighting multiple toolbarbutton's?
Thanks in advance for any suggestion and code snippets.
Jim
4 Answers, 1 is accepted
Please check the RadToolBar Overview online example where such functionality is demonstrated in action:
http://demos.telerik.com/aspnet-ajax/toolbar/examples/overview/defaultcs.aspx
You can find also more information in the following help article:
http://www.telerik.com/help/aspnet-ajax/toolbar-itemschecked.html
Regards,
Aneliya Petkova
Telerik
Hi Aneliya,
I reviewed the demo's but my situation is a bit different.
I should have mentioned that I need to do this from Javascript.
For example, when a user clicks on a particular object on the diagram (3rd party control), I need to interrogate its properties and then light up the appropriate toolbar item.
Here's a subset of my toolbar declaration:
<
telerik:RadToolBarButton
runat
=
"server"
ToolTip
=
"Bold"
CheckOnClick
=
"True"
Value
=
"textBold"
ImageUrl
=
"Images/Navvia/bold.png"
>
</
telerik:RadToolBarButton
>
<
telerik:RadToolBarButton
runat
=
"server"
ToolTip
=
"Italic"
CheckOnClick
=
"True"
Value
=
"textItalic"
ImageUrl
=
"Images/Navvia/italic.png"
>
</
telerik:RadToolBarButton
>
<
telerik:RadToolBarButton
runat
=
"server"
ToolTip
=
"Underline"
CheckOnClick
=
"True"
Value
=
"textUnderline"
ImageUrl
=
"Images/Navvia/underline.png"
>
</
telerik:RadToolBarButton
>
And here's a snippet of the script that is attempting to check the appropriate toolbarbutton:
var toolBarID = $telerik.$("[id$='RadToolBar1']").attr("id");
var toolBar = $find(toolBarID);
var textBold = toolBar.get_items().getItem(19);
var textItalic = toolBar.get_items().getItem(20);
var textUnderline = toolBar.get_items().getItem(21);
...
if (object) {
// Bold
if (object.labels[0]) { // node
if (object.labels[0].bold) {
textBold.check();
} else {
textBold.unCheck();
}
}
// Italic
if (object.labels[0]) { // node
if (object.labels[0].italic) {
textItalic.check();
} else {
textItalic.unCheck();
}
}
// Underline
if (object.labels[0]) { // node
if (object.labels[0].textDecoration == 'underline') {
textUnderline.check();
} else {
textUnderline.unCheck();
}
}
The above will highlight only 1 of the 3 buttons.
For example if all 3 properties are set, only the Underline button is selected.
If Bold and Italic are set, only the Italic button is selected.
Any other suggestions?
Thanks
Jim
Please try the following - add different Group to every RadToolBarButton:
<
telerik:RadToolBarButton
Text
=
"Bold"
ImageUrl
=
"~/images/bold.gif"
Group
=
"Bold"
CheckOnClick
=
"true"
AllowSelfUnCheck
=
"true"
>
</
telerik:RadToolBarButton
>
<
telerik:RadToolBarButton
Text
=
"Italic"
ImageUrl
=
"~/images/italic.gif"
Group
=
"Italic"
CheckOnClick
=
"true"
AllowSelfUnCheck
=
"true"
>
</
telerik:RadToolBarButton
>
<
telerik:RadToolBarButton
Text
=
"Underline"
ImageUrl
=
"~/images/underline.gif"
Group
=
"Underline"
CheckOnClick
=
"true"
AllowSelfUnCheck
=
"true"
>
</
telerik:RadToolBarButton
>
Regards,
Aneliya Petkova
Telerik
Hi Aneliya,
Thanks, this addressed my requirement.
I have a related requirement, but I'll submit a new post for that.
Hopefully, you can help me on that one as well :)
Jim