RadButton with two toggle states does not show image

[Rob]

I want to put a button on the page that uses the ConfirmBtn-Grey.jpg image when the page loads, and then when the button is clicked it should display ConfirmBtn-Selected.jpg.

I'm using the following RadButton definition, but not getting any images displayed on my page...

<telerik:RadButton ID="RadButton1" runat="server" ButtonType="ToggleButton" ToggleType="CustomToggle">
    <ToggleStates>
        <telerik:RadButtonToggleState Selected="true" ImageUrl="../images/ConfirmBtn-Grey.jpg" />
        <telerik:RadButtonToggleState ImageUrl="../images/ConfirmBtn-Selected.jpg" />
    </ToggleStates>
</telerik:RadButton>

I've checked the paths to my images using Firebug and it's picking them up ok. Have I defined the button incorrectly?

Rob

[Shinu]

Hi,

I have made some modifications in your code. I was able to set the image by setting height and width for the button. Here is the sample code.
aspx:

<telerik:RadButton ID="RadButton1" Width="58px" Height="59px" runat="server" ButtonType="ToggleButton"ToggleType="CustomToggle">
 <ToggleStates>
                <telerik:RadButtonToggleState Selected="true" ImageUrl="Images/img.png" />
                <telerik:RadButtonToggleState ImageUrl="Images/img.gif" />
 </ToggleStates>
</telerik:RadButton>

Thanks,
Shinu.

[Matt]

Odd... doesn't work.

The images exist.. but don't appear.

 <telerik:RadButton ID="RB_CopyCC" runat="server" TabIndex="1" ButtonType="ToggleButton" ToggleType="CustomToggle" UseSubmitBehavior="false" AutoPostBack="false" ToolTip="Check to copy the division" Width="20px" Height="20px">
                    <ToggleStates>
                        <telerik:RadButtonToggleState ImageUrl="../Images/left.png" />
                        <telerik:RadButtonToggleState ImageUrl="../Images/right.png" />
                    </ToggleStates>
                </telerik:RadButton>

[Matt]

I can't get the images to render but I can see that the url to the image appears in the "View Source" of the document... if I use a simple img tag, it appears.

Two different developers having the same problem... I'm guessing that since the OP didn't reply, didn't work for him either.

Can you post a picture of the test being successful?

[Marin Bratanov]

Hello Matt,

I am attaching below a small sample that works for me. If comparing it against your project does not help, can you show me how to modify it so it showcase the problem, and also provide the Telerik controls version the project uses? I'm also attaching a short video of how this works as expected for me.

The original post is from 2012 and Shinu's post was marked as an answer by OP (there is a grey background on the post and an "ANSWER" banner above the avatar), which indicates this worked for them.

Regards,
Marin Bratanov
Progress Telerik

[Matt]

Thank you for the video. I'm using Q2 of 2015. I found that I had to set the image to be the exact height and width specified in the control. I assumed it would scale it down, like the IMG tag...ugh, what a waste of time trying to figure out something that isn't native like other elements and controls are...

[Marin Bratanov]

Hi Matt,

The provided image is used as a background-image CSS rule that's set with JavaScript, and background images do not scale by default. This is done for a number of reasons, the chief two being that it must allow for changing the image without postbacks and because that was how the feature could be fit into the rendering the control already had when it had to be implemented, so a breaking change could be avoided.

In the future when having similar issues, you can inspect the rendered HTML and its CSS rules through the browser dev toolbar to see what is going on so you can have a stronger pointer for troubleshooting. The following blog post can help people gets started with this: https://www.telerik.com/blogs/improve-your-debugging-skills-with-chrome-devtools.

Also, the newer RadToggleButton provides a property for controlling the size of the image: https://docs.telerik.com/devtools/aspnet-ajax/controls/togglebutton/functionality/image. I am attaching a sample that shows how this works and how a little bit of CSS can have the old button behave the same way in case upgrading to get the new buttons is not an option.

Regards,
Marin Bratanov
Progress Telerik