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

How to allow multiple RadToolBarButton's to be checked/selected/highlighted at once

4 Answers 62 Views
ToolBar
This is a migrated thread and some comments may be shown as answers.
jlj30
Top achievements
Rank 2
jlj30 asked on 28 May 2015, 06:50 PM

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:

  1. To set the attribute (e.g., Bold) of the selected object
  2. 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

Sort by
0
Aneliya Petkova
Telerik team
answered on 29 May 2015, 09:57 AM
Hi Jim,

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
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
0
jlj30
Top achievements
Rank 2
answered on 29 May 2015, 12:38 PM

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

 

 

 

0
Accepted
Aneliya Petkova
Telerik team
answered on 01 Jun 2015, 01:59 PM
Hi 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
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
0
jlj30
Top achievements
Rank 2
answered on 01 Jun 2015, 06:15 PM

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

Tags
ToolBar
Asked by
jlj30
Top achievements
Rank 2
Answers by
Aneliya Petkova
Telerik team
jlj30
Top achievements
Rank 2
Share this question
or