Undesirable ToggleButton behavior in IE

3 posts, 1 answers
  1. neebs
    neebs avatar
    106 posts
    Member since:
    Apr 2007

    Posted 01 Mar 2011 Link to this post

    I have a set of toggle buttons on a form. I want a custom image that changes states depending on a state kept in the code-behind. The code definition for the toggle buttons is here:

    <telerik:RadButton ID="RadButtonOptionCapital" runat="server" OnToggleStateChanged="RadButtonOptionCapital_ToggleStateChanged"
        ToggleType="CustomToggle" ToolTip="Capital" ButtonType="ToggleButton"
        AutoPostBack="True" BorderStyle="None" >
        <telerik:RadButtonToggleState PrimaryIconUrl="Images/Dollar-Ironwood-16.png" Selected="true" />
        <telerik:RadButtonToggleState PrimaryIconUrl="Images/Dollar-Grey-16.png" />

    I have three of these in a row, each in their own div such that they line up nicely. In IE only, when I click one of the toggle buttons it alters its position to a few pixels higher. See the attached images. This works fine in Chrome and Firefox. Any suggestions for a workaround?

    If you're wondering what I do in OnToggleStateChanged, I change the tooltip text and refresh a grid based on the setting. However I have removed the OnToggleStateChanged and it still happens. The only way to make it not happen is to set AutoPostBack to False.

    Also, I think the initial position of the image is wrong, not the position after it's toggled. It remains in the toggled position no matter how many times I click it, and the final position matches the position that Chrome and Firefox renders it at. 

  2. Answer
    Pero avatar
    1156 posts

    Posted 03 Mar 2011 Link to this post

    Hello Steve,

    If you plan on using the RadButton only as image button, then my recommendation is to use the ImageUrl property of the RadButtonToggleState to set the images. Note that you must explicitly set the Width and Height of the button when using it as ImageButton.
    In case you need to show a text next to the image, then Icons should be used.

    For your convenience I have created a sample project that shows how to have ImageButton that toggles its state, both using the PrimaryIconUrl and ImageUrl, properties. Please find the full source code attached to the thread.

    Best wishes,
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  3. neebs
    neebs avatar
    106 posts
    Member since:
    Apr 2007

    Posted 04 Mar 2011 Link to this post

    Thanks, that works great!

Back to Top