how to put image in Radbutton

9 posts, 0 answers
  1. Chetan
    Chetan avatar
    11 posts
    Member since:
    Aug 2010

    Posted 14 Oct 2010 Link to this post

    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.

  2. Zarko
    Zarko avatar
    755 posts

    Posted 18 Oct 2010 Link to this post

    Hi Chetan,

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

    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
  3. DevCraft banner
  4. Michael Gaigg
    Michael Gaigg avatar
    9 posts
    Member since:
    Dec 2009

    Posted 17 Feb 2011 Link to this post

    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>
  5. Jittu
    Jittu avatar
    18 posts
    Member since:
    Sep 2012

    Posted 17 Sep 2012 Link to this post


     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"  />

    Do I need to set any other property to make it work?
  6. Ryan
    Ryan avatar
    7 posts
    Member since:
    Jun 2012

    Posted 20 Oct 2012 Link to this post

    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):

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


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

  7. Matt
    Matt avatar
    49 posts
    Member since:
    Jun 2012

    Posted 16 Sep 2013 Link to this post

    None of these work with IE7 or IE8 (2013.2 version). This is insanely frustrating.
  8. Danail Vasilev
    Danail Vasilev avatar
    1476 posts

    Posted 19 Sep 2013 Link to this post

    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?

    Danail Vasilev
    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.
  9. Chinmaya
    Chinmaya avatar
    24 posts
    Member since:
    Aug 2014

    Posted 10 Oct 2014 in reply to Danail Vasilev Link to this post

    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">
                                        <Image Source="Images/setting.png" Stretch="Fill" />

    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

  10. Masha
    Masha avatar
    355 posts

    Posted 13 Oct 2014 Link to this post

    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" />

    I've demonstrated the approach in the attached project.

    Please let us know if you need any further help.


    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.

Back to Top
DevCraft banner