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

Default image when image does not exist

3 Answers 253 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Kristof
Top achievements
Rank 1
Kristof asked on 04 Aug 2010, 02:27 PM
Hi,

I have a grid with a GridImageColumn, now I would like to make a change. It is sometimes possible that the image the column wants to show does not exist, and I cannot check this server side before or during databind.

I found some javascript code which allows to set a new "default" image src in case the url it is pointing to does not exist, but the problem is that I do not know how to access the html <img /> element inside the GridImageColumn.

My question: is there a way to set the javascript OnError function if the <img /> element inside a GridImageColumn row either server side or client side? So I would like to be able to edit the attributes of that <img /> element which is about to be rendered... How to do this?

Kind Regards,
Kristof

3 Answers, 1 is accepted

Sort by
0
Cori
Top achievements
Rank 2
answered on 04 Aug 2010, 06:47 PM

Why are you not able to check if the image exists or not from the server-side? You should be able to look up the image from the RadGrid's ItemDataBound event and using File.Exists method to check if the image exists or not.

 

Is that not what you want to do?

0
Kristof
Top achievements
Rank 1
answered on 05 Aug 2010, 08:22 AM
The image is located on ANOTHER http server, not on my own physical server. So I cannot use File.Exists(). The only thing I could do is check if the file exists by requesting it through a HttpRequest, but that makes it too slow...

I want the browser itself to check if the image exists (which it does anyway by trying to show it) and take action when it does not exist with some javascript...

But then I need to set the OnError attribute of the <img /> element somehow...
0
Kristof
Top achievements
Rank 1
answered on 06 Aug 2010, 09:40 AM
I found a solution for this, in case anyone else is interested:

Catch the OnItemDataBound Event of the radgrid and handle it as follows:
if (e.Item is GridDataItem)
{
    //set the onError attribute to handle images which do not exist
    var imageColumnIndex = e.Item.OwnerTableView.Columns.FindByUniqueName("ImageColumn").OrderIndex;
    var imageCell = e.Item.Cells[imageColumnIndex];
    var image = imageCell.Controls[0] as Image;
  
    if (image != null)
    {
        image.Attributes["onError"] = "javascript:ShowDefaultImage(this);";
    }
}


And add the following javascript code to your project:
function ShowDefaultImage(img) {
    img.src = "images/defaultImage.png";
}

Works great, the browser will now automatically detect when an image on a remote server does not exist, and replace it with the default image instead of an ugly red cross...

Kind Regards,
Kristof
Tags
Grid
Asked by
Kristof
Top achievements
Rank 1
Answers by
Cori
Top achievements
Rank 2
Kristof
Top achievements
Rank 1
Share this question
or