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

7 posts, 0 answers
  1. Ben Grossman
    Ben Grossman avatar
    12 posts
    Member since:
    Nov 2009

    Posted 03 Jan 2012 Link to this post

    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
  2. jumpstart
    jumpstart avatar
    479 posts
    Member since:
    Nov 2011

    Posted 04 Jan 2012 Link to this post

    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">
     
    <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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ben Grossman
    Ben Grossman avatar
    12 posts
    Member since:
    Nov 2009

    Posted 04 Jan 2012 Link to this post

    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
  5. jumpstart
    jumpstart avatar
    479 posts
    Member since:
    Nov 2011

    Posted 04 Jan 2012 Link to this post

    Ben:

    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,
  6. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 05 Jan 2012 Link to this post

    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
  7. Fergal
    Fergal avatar
    23 posts
    Member since:
    Jun 2012

    Posted 29 Aug 2012 Link to this post

    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?
  8. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 03 Sep 2012 Link to this post

    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
    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017