Ben Grossman
Top achievements
Rank 1
Rank 1
Ben Grossman
asked on 03 Jan 2012, 06:43 PM
Hello,
I have a scenario that requires me to change the image on a particular RadButton from javascript. Is this possible? It is easy to change the text using the "set_text" function but changing the Image doesn't seem to be possible directly using the api.
Any help would be appreciated.
Thanks,
Ben
I have a scenario that requires me to change the image on a particular RadButton from javascript. Is this possible? It is easy to change the text using the "set_text" function but changing the Image doesn't seem to be possible directly using the api.
Any help would be appreciated.
Thanks,
Ben
6 Answers, 1 is accepted
0
Richard
Top achievements
Rank 1
Rank 1
answered on 04 Jan 2012, 03:03 PM
Ben:
As you've discovered, it's not possible to set the image-imageurl property via javascript. As Telerik support noted: "there are two client-side methods of the button control that will allow you to reference the HTML elements of the RadButton's icons - get_primaryIconElement() and get_secondaryIconElement(). After you get the icons' elements all you have to do is change their styles via custom client script in order to apply the new icon."
Then, you can manipulate the Icon's PrimaryIconHeight and PrimaryIconWidth settings to match your image's exact dimensions.
I've made a simple sample to demo this.
Default.aspx:
See the attached images: "image_button_1" and "image_button_2" (original button images) and "image_button_display_1" and "image_button_display_2" (second set) resulting output.
Hope this helps.
As you've discovered, it's not possible to set the image-imageurl property via javascript. As Telerik support noted: "there are two client-side methods of the button control that will allow you to reference the HTML elements of the RadButton's icons - get_primaryIconElement() and get_secondaryIconElement(). After you get the icons' elements all you have to do is change their styles via custom client script in order to apply the new icon."
Then, you can manipulate the Icon's PrimaryIconHeight and PrimaryIconWidth settings to match your image's exact dimensions.
I've made a simple sample to demo this.
Default.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %><%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" /></head><body> <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> <Scripts> <%--Needed for JavaScript IntelliSense in VS2010--%> <%--For VS2008 replace RadScriptManager with ScriptManager--%> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" /> </Scripts> </telerik:RadScriptManager> <script type="text/javascript"> var imageButton = null; function ChangeIcon(me) { var button = GetRadButton(); var primaryIconElement = button.get_primaryIconElement(); var imagePath = "url('images/" + me.value + "')"; $telerik.$(primaryIconElement).css("background-image", imagePath); //alert(imagePath); } function GetRadButton() { return $find("<%=RadButton1.ClientID %>"); } </script> <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> </telerik:RadAjaxManager> <div> <input type="radio" checked="checked" name="imageName" onclick="ChangeIcon(this)" value="image_button_1.png" />image_button_1.png <input type="radio" name="imageName" onclick="ChangeIcon(this)" value="image_button_2.png" />image_button_2.png </div> <div> <telerik:RadButton ID="RadButton1" runat="server" Text="Image Button"> <Icon PrimaryIconUrl="images/image_button_1.png" PrimaryIconHeight="43px" PrimaryIconWidth="150px" /> </telerik:RadButton> </div> </form></body></html>See the attached images: "image_button_1" and "image_button_2" (original button images) and "image_button_display_1" and "image_button_display_2" (second set) resulting output.
Hope this helps.
0
Ben Grossman
Top achievements
Rank 1
Rank 1
answered on 04 Jan 2012, 04:03 PM
This works fine for swapping out images, but what if I want to swap between the embedded icons that are set using the PrimaryIconCssClass properties?
Thanks in advance,
Ben
Thanks in advance,
Ben
0
Richard
Top achievements
Rank 1
Rank 1
answered on 04 Jan 2012, 11:08 PM
Ben:
You should be able to toggle between:
and
setting the new icon's path and manipulating the Icon's PrimaryIconHeight and PrimaryIconWidth settings to match your image's exact dimensions.
Regards,
You should be able to toggle between:
$telerik.$(primaryIconElement).css("background-image", imagePath);and
$telerik.$(secondaryIconElement).css("background-image", imagePath);setting the new icon's path and manipulating the Icon's PrimaryIconHeight and PrimaryIconWidth settings to match your image's exact dimensions.
Regards,
0
Hello guys,
If you want to switch the embedded icons of the RadButton control, you can do so by changing the CSS class of the icon element with the desired one. As shown in the code snippet below, this can be achieved via the RadButton's client method get_primaryIconElement() or get_secondaryIconElement(), depending on the icon you want to change, and additional jQuery script:
In this online demo you can check the full list of embedded icons, available for use.
All the best,
Slav
the Telerik team
If you want to switch the embedded icons of the RadButton control, you can do so by changing the CSS class of the icon element with the desired one. As shown in the code snippet below, this can be achieved via the RadButton's client method get_primaryIconElement() or get_secondaryIconElement(), depending on the icon you want to change, and additional jQuery script:
var button = $find("<%=RadButton1.ClientID %>");var primaryIconElement = button.get_primaryIconElement();$telerik.$(primaryIconElement).removeClass("rbAdd");$telerik.$(primaryIconElement).addClass("rbRemove");In this online demo you can check the full list of embedded icons, available for use.
All the best,
Slav
the Telerik team
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 their blog feed now
0
Fergal
Top achievements
Rank 1
Rank 1
answered on 29 Aug 2012, 01:52 PM
I'm using the above code to change the background-image on the primaryIconElement object, but it doesn't seem to be updating. Alongside it, I'm using set_text(), and this works fine.
Is there another way to set this?
Is there another way to set this?
0
Hi Fergal,
Most probably your CSS class that specifies the background image is overridden by styles with more weight. You can use the attached sample as a reference for changing the button's icon in your actual project.
Regards,
Slav
the Telerik team
Most probably your CSS class that specifies the background image is overridden by styles with more weight. You can use the attached sample as a reference for changing the button's icon in your actual project.
Regards,
Slav
the Telerik team
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 their blog feed now.