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

[jlj30]

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

 

[Aneliya Petkova]

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

[jlj30]

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

 

 

 

[Aneliya Petkova]

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

[jlj30]

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