This is a migrated thread and some comments may be shown as answers.

RadButton with two toggle states does not show image

6 Answers 70 Views
Button
This is a migrated thread and some comments may be shown as answers.
Rob
Top achievements
Rank 1
Rob asked on 13 Dec 2012, 10:53 AM
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

6 Answers, 1 is accepted

Sort by
0
Accepted
Shinu
Top achievements
Rank 1
answered on 13 Dec 2012, 12:11 PM
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.
0
Matt
Top achievements
Rank 1
answered on 10 Jul 2018, 07:35 PM

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>

0
Matt
Top achievements
Rank 1
answered on 10 Jul 2018, 07:46 PM

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?

0
Marin Bratanov
Telerik team
answered on 11 Jul 2018, 04:22 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Matt
Top achievements
Rank 1
answered on 11 Jul 2018, 05:18 PM

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...

0
Marin Bratanov
Telerik team
answered on 12 Jul 2018, 05:49 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Button
Asked by
Rob
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
Matt
Top achievements
Rank 1
Marin Bratanov
Telerik team
Share this question
or