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

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

    Posted 01 Jun 2015 Link to this post

    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

     

     

     

     

  2. Answer
    Aneliya Petkova
    Admin
    Aneliya Petkova avatar
    207 posts

    Posted 02 Jun 2015 Link to this post

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

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

    Hi Aneliya,

    The style you provided worked just fine - even if it is a workaround.

    Thanks for the prompt reply.

    Jim

  5. Albert Shenker
    Albert Shenker avatar
    551 posts
    Member since:
    Mar 2004

    Posted 27 Aug 2015 Link to this post

    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?

  6. Aneliya Petkova
    Admin
    Aneliya Petkova avatar
    207 posts

    Posted 28 Aug 2015 Link to this post

    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
    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
  7. Albert Shenker
    Albert Shenker avatar
    551 posts
    Member since:
    Mar 2004

    Posted 28 Aug 2015 in reply to Aneliya Petkova Link to this post

    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?
  8. Aneliya Petkova
    Admin
    Aneliya Petkova avatar
    207 posts

    Posted 28 Aug 2015 Link to this post

    Hi Albert,

    Please check the following help article where the purpose of "Two state buttons" is really well explained:
    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
    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017