This is a migrated thread and some comments may be shown as answers.
how to put image in Radbutton
8 Answers 799 Views
This is a migrated thread and some comments may be shown as answers.
Chetan
Top achievements
Rank 1
Chetan asked on 14 Oct 2010, 07:23 PM
Hi Telerik Team,

Is it possible to put image in RadButton?

how to make it possible ?

please let me know. if you can come with small code then it will be very helpful for me.


waiting for reply.


Thanks
Chetan

8 Answers, 1 is accepted

Sort by
0
Zarko
Telerik team
answered on 18 Oct 2010, 10:07 AM
Hi Chetan,

 Could you please examine the attached project and if you have further questions feel free to ask?

Regards,
Zarko
the Telerik team
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 Public Issue Tracking system and vote to affect the priority of the items
0
Michael Gaigg
Top achievements
Rank 1
answered on 17 Feb 2011, 08:20 PM
from the sample above:

            <telerik:RadButton Width="200" Height="50" Margin="5">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Margin="11">Bananas Button</TextBlock>
                    <Image Source="Images/bananas.png" Height="40" ></Image>
                </StackPanel>
            </telerik:RadButton>
0
Jittu
Top achievements
Rank 1
answered on 17 Sep 2012, 04:09 PM
Hi,

 Border Style / Back color for the Rad button just disappears .
         <telerik:RadButton ID="RadButton3" runat="server" Text="Preferences" BorderStyle="Double" BackColor="Black">
    <Icon PrimaryIconUrl="Images/icon_preferences.png"  />
</telerik:RadButton>




Do I need to set any other property to make it work?
0
Ryan
Top achievements
Rank 1
answered on 20 Oct 2012, 09:52 AM
Hey try this, I got if from the Telerik forum, there are two ways to display an image on the control:

    The first and the easiest way is to set the Image.ImageUrl property to the location of the image used. Setting the IsBackgroundImage to true enables the developer to use the image as background, and set text and icons to his/her button.

    The second way to set the image using RadButton'sCssClass property. Basically we set the background-image in the CssClass, and enable the image button functionality by setting Image.EnableImageButton=true.

This approach is preferred when you want to use an image sprite for the button (see sample below). You set the background-image and background-position in the CssClass, and then in the HoveredCssClass and PressedCssClass, only the background-position of the hovered and pressed image.If the user wants she/he can display a different image when the mouse is hovering over the control, or the button is pressed using the HoveredImageUrl and PressedImageUrl properties respectively.
Collapse imageSample for p.2 (RadButton and Image Sprites):
CSS>>>>

<style type="text/css">
    .classImage
    {
        background: url(img/categories.png);
        background-position: 0 0;
        width: 150px;
        height: 94px;
    }
    .classHoveredImage
    {
        background-position: 0 -100px;
    }
    .classPressedImage
    {
        background-position: 0 -200px;
    }
</style>


ASPX>>>>

<telerik:radbutton id="RadButton1" runat="server" text="Image Button" cssclass="classImage"
        hoveredcssclass="classHoveredImage" pressedcssclass="classPressedImage">
    <Image EnableImageButton="true" />
</telerik:radbutton>

0
Matt
Top achievements
Rank 1
answered on 16 Sep 2013, 07:37 PM
None of these work with IE7 or IE8 (2013.2 version). This is insanely frustrating.
0
Danail Vasilev
Telerik team
answered on 19 Sep 2013, 09:13 AM
Hello Matt,

You can try reusing the declaration for the RadButton's image buttons from the following demos:
All of these demos are using 2013.2.717 version of RadControls and are working properly in all major browsers, including IE7/IE8.

If you are still experiencing any issues with declaring RadButton as an image button, could you please provide a small code snippet that reproduces the unexpected behavior, so that we can make an investigation on our side?

Regards,
Danail Vasilev
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Chinmaya
Top achievements
Rank 1
answered on 10 Oct 2014, 07:43 AM
Hello Danail,

I am trying to put image to RadMenuItem and below is my code

<telerik:RadMenu x:Name="menu" Grid.Column="1"  ClickToOpen="True" Background="Transparent"  Width="17" Height="17" ToolTipService.ToolTip="{Binding Source={StaticResource LocalizedStrings}, Path=Options}" ToolTipService.Placement="Bottom" Padding="0">
                        <telerik:RadMenuItem x:Name="options" IconColumnWidth="0" Width="17" Height="17" Padding="0">
                            <telerik:RadMenuItem.Icon>
                                    <Image Source="Images/setting.png" Stretch="Fill" />
                            </telerik:RadMenuItem.Icon>
                        </telerik:RadMenuItem>
                    </telerik:RadMenu>

in this even though i am setting the image Stretch ="Fill" still I get padding with respect to menu and its menuItem.

is there way to make it possible to take out that padding?

NOTE: the row height=20  where this UI is placed

0
Masha
Telerik team
answered on 13 Oct 2014, 01:29 PM
Hello Chinmaya,

As you set IconColumnWidth to 0, you should put the icons in the Header of RadMenuItems instead of using RadMenuItem Icon property. I suggest that you use HeaderTemplate property of RadMenuItem as follow:
<DataTemplate x:Key="myHeaderTemplate">
    <Image Source="Images/setting.png" Stretch="Fill" />
</DataTemplate>


I've demonstrated the approach in the attached project.

Please let us know if you need any further help.

Regards,
Masha
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Asked by
Chetan
Top achievements
Rank 1
Answers by
Zarko
Telerik team
Michael Gaigg
Top achievements
Rank 1
Jittu
Top achievements
Rank 1
Ryan
Top achievements
Rank 1
Matt
Top achievements
Rank 1
Danail Vasilev
Telerik team
Chinmaya
Top achievements
Rank 1
Masha
Telerik team
Share this question
or