Custom images in the cells

Hi all,

question about images is a really complicated one because sometimes it is not so straightforward, for example when you need to have different images in different cells but you don't know what the image will be at the CSS design time.
For example I have a grid that has column "Export". This column has two links: <long> <short>, each of them has to have it's own text OR image depending on the type of the page it is displayed on.

So if I display it with images enabled I need to put two images that are wrapped into <a/> tag.

Is there an easy way of doing it ?

Andrew ... yes ... custom images implementation are a pain - at least until I found someone (Jim Hunter) that could realll explain it to me.

Below is an example of the code I'm using - and it works great.
But, first a little background:
I have a GRID that has 5 columns that need custom images (of which I do not know what they need to be until runtime). In these columns, I need to have either 1 or 2 custom images (and they each need to be links) - again, I don't know if I will have one image or two images and I don't know what the links are either.

So, in the data, I have 5 columns - each row needing 1-2 images that need t obe links. In my data, I also have a column that has a value "green","yello", etc and another column that has a file name "carl.pdf".

Now, if the above appears twice, that would mean that this particular row needs this particular column ("Feas" - below), I need to account for two image/links in the column and not just one.

Obviously, CSS didn't help me much like it didn't help you.

Here is the catch that makes things work - I do not set the cell template to "link" or "image" - like I had been trying to do. I leave it as TEXT and build the actual html code to set the images and define the link. My code isn't all that great. I do need to refine it a little. But it will get you started.

If you'd like to see a functional example, send me an email (dafweg69@yahoo.com) and I'll send you a link.

// Setting Feas Icons and links
obj.setCellText(function(col,row){				
   if (this.getCellValue(28, row) == "s") {
      return "<a target='_new' href='http://www.domain.com/planning/project-queues/feas_docs/"+ this.getCellValue(13,row) + "'><img border='0' src='http://www.domain.com/images/gen-queues/"+ this.getCellValue(18,row) + ".gif'></a>"
  } else {
    return "<a target='_new' href='http://www.domain.com/planning/project-queues/feas_docs/"+ this.getCellValue(13,row) + "'><img border='0' src='http://www.domain.com/images/gen-queues/"+ this.getCellValue(18,row) + ".gif'><br><a target='_new' href='http://www.domain.com/planning/project-queues/feas_docs/" + this.getCellValue(23,row) + "'><img border='0' src='http://www.domain.com/images/gen-queues/" + this.getCellValue(28,row) + ".gif'></a>"
  }
},13);

Andrew, basically the only time that you can use setControlImage or setCellImage or any other set/Image method is when you have a known image ahead of time that you can create CSS elements for. If the images are unknown then you have to use your HTML knowledge and create IMG tags to put into the cellText or controlText areas. Don't let the name fool you, the 'text' of a control can contain any valid HTML. So you can create <a> tags and <img> tags to place in your grid cells or in your controls text area and it will work just fine. And if you have odd sized images this is about the only way to do it because images in CSS need to be 18 x 18 pixels (I think that is the size, I have other posts about this that you can confirm with).

Hope this helps.