Implementing a fix for the Lightweight RenderMode is likely to cause regressions:
- https://feedback.telerik.com/Project/108/Feedback/Details/166590-fix-the-compatibility-of-radbutton-in-lightweight-with-image-in-cookieless-sessio
- https://feedback.telerik.com/Project/108/Feedback/Details/66505-fix-the-compatibility-of-radbutton-with-custom-image-that-contains-special-symbol
Thus, there are several workarounds:
- use the Classic RenderMode, if possible
- use the script below
- use CSS to set the icon instead of a property (example further down)
JS workaround:
<telerik:RadButton runat="server" ID="rb1" RenderMode="Lightweight">
<Icon PrimaryIconUrl="~/Circle_Green_20.png" />
</telerik:RadButton>
<telerik:RadPushButton runat="server" ID="rpb1" text="sample text">
<Icon Url="Circle_Green_20.png" />
</telerik:RadPushButton>
<script>
function repaintButtons() {
$telerik.$(".RadButton.rbIconButton, .RadButton.rbIconOnly").each(function (index, elem) {
if (elem && elem.control && elem.control.repaint) {
elem.control.repaint();
}
});
//uncomment this if you want the method to fire after each partial postback as well
//Sys.Application.remove_load(repaintButtons);
}
Sys.Application.add_load(repaintButtons);
</script>
CSS workaround:
<telerik:RadButton runat="server" ID="rb1" RenderMode="Lightweight" CssClass="myCustomIcon" Text="some text">
<Icon PrimaryIconUrl="Circle_Green_20.png" />
</telerik:RadButton>
<style>
.myCustomIcon .rbPrimaryIcon
{
background-image: url(Circle_Green_20.png);
}
</style>