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

5 posts, 1 answers
  1. jlj30
    jlj30 avatar
    101 posts
    Member since:
    Jan 2011

    Posted 28 May 2015 Link to this post

    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

     

  2. Aneliya Petkova
    Admin
    Aneliya Petkova avatar
    207 posts

    Posted 29 May 2015 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. jlj30
    jlj30 avatar
    101 posts
    Member since:
    Jan 2011

    Posted 29 May 2015 in reply to Aneliya Petkova Link to this post

    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

     

     

     

  5. Answer
    Aneliya Petkova
    Admin
    Aneliya Petkova avatar
    207 posts

    Posted 01 Jun 2015 Link to this post

    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
  6. jlj30
    jlj30 avatar
    101 posts
    Member since:
    Jan 2011

    Posted 01 Jun 2015 in reply to Aneliya Petkova Link to this post

    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

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017