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

Possible to change the PrimaryIconCssClass or PrimaryIconUrl properties from client side?

6 Answers 367 Views

Button

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

6 Answers, 1 is accepted

answered on 04 Jan 2012, 03:03 PM

image-button-1.png

image-button-2.png

image-button-display-1.png

image-button-display-2.png

image-button-display-1.png

image-button-display-2.png

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:

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

answered on 05 Jan 2012, 02:30 PM

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:

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

answered on 03 Sep 2012, 10:03 AM

RadButtonChangeIcons.zip

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