Image url encoding is changed on mouse over/ hover

[Geoff]

We had recently updated from 2012 - Q2 to 2013 - Q3 . We have come across an issue where url encodes with %20 (aka a space in the name of the image) causes a RadButton with an image to change the url on mouse over / hover and make the image disappear / lose it's original URL because the encoding is changing.

For example, the original url for an image will load and display as:

http://8f2270e13c3e0703baa2-6c2aaf386ecfc7423d48bccd1a997322.r2.cf1.rackcdn.com/Public-Personal/Who%20We%20Are/Our%20Mission/plumpy-updated.jpg

When hovered, it is changed to:

http://8f2270e13c3e0703baa2-6c2aaf386ecfc7423d48bccd1a997322.r2.cf1.rackcdn.com/Public-Personal/Who%2520We%2520Are/Our%2520Mission/plumpy-updated.jpg

The url returned back that then does not display is encoding my %20 (a space) now to a %2520 (%25 is a %) and the added 20 goes no where causing a dead link. 

Is there a simple solution to prevent the automatic encoding from happening? I would prefer to not go through a 4 year old project and change every image that could potentially have this happening. 

We have typically tried to keep spacing out of our url's as a best practice, but it does not always happen that way.

Thanks

[Danail Vasilev]

Hi Geoff,

The observed behavior is expected because the URL set of the button is encoded through the encodeURI() method. What actually happens is that the "%" sign is encoded. In order to handle that it would be better if you can replace this character with another one that is not affected by this method. You can for example make a global find-replace operation. You can also find below a workaround that removes this encoding from the RadButton code:
ASPX:

<telerik:RadButton ID="RadButton1" runat="server" Width="500px" Height="200px" Image-ImageUrl="http://8f2270e13c3e0703baa2-6c2aaf386ecfc7423d48bccd1a997322.r2.cf1.rackcdn.com/Public-Personal/Who%20We%20Are/Our%20Mission/plumpy-updated.jpg" />
<script>
    Telerik.Web.UI.Button.AbstractUI.prototype._setBackground = function (elem, imgUrl) {
        if(elem && imgUrl) {
            //Original:
            //elem.style.backgroundImage = "url(" + encodeURI(imgUrl) + ")";
            //Modified:
            elem.style.backgroundImage = "url(" + imgUrl + ")";
        }
    }
</script>

The workaround must be placed below the button's declaration and is related to latest Telerik UI version.

Regards,
Danail Vasilev
Telerik