:: Forum >> Version 2 >>

How do you add an image to the first column in a grid?

More information on this topic is available in the documentation section: /aw.ui.grid/selector-model.html.

This SHOULD be so easy to find, but I havent been able to find any documentation. Any help would be appreciated.
L. Aragon
Thursday, February 23, 2006
What exactly do you want to do? The grid shows information inthe datasource. Does your datasource contain IMG information for an image? Do you want to add an image after the grid is displayed? Are you talking about puting an image in the row header area? We need a little more information from you in order to assit.
Jim Hunter (www.FriendsOfAW.com)
Thursday, February 23, 2006
I was hoping to add an image to the row header but which image depends on a variable in the data. hope this makes sense.
L. Aragon
Thursday, February 23, 2006
You can use obj.setSelectorText("your html to expose an image", rowNumber) to add any html to the row selector of any given row. So if you wanted to display a + image to the second row from the top, it might look like this:

obj.setSelectorText("<img src='plus.gif'>"1);  Hope this helps.
Jim Hunter (www.FriendsOfAW.com)
Thursday, February 23, 2006
Actually, I just need to add an image to the first column...not using the row selectors.
L. Aragon
Thursday, February 23, 2006
how do i add an image to all the rows? and can i make it dynamic based on data in the grid?
L. Aragon
Thursday, February 23, 2006
The methods are similar:

obj.setCellText("<img src='plus.gif'>"11);  This is in the form of ("HTML", COL, ROW)
Jim Hunter (www.FriendsOfAW.com)
Thursday, February 23, 2006
all i want to do is add an image to every cell in the first column along with the text. same effect as you see in windows explorer.

this only tells me how to change an individual cell.

thanks for all the help BTW.
L. Aragon
Thursday, February 23, 2006
figured it out...

obj.setCellTemplate(new AW.Templates.ImageText, 1);
obj.setCellImage("favorites",1);
obj.setCellText(awdata);


i knew it had to be easy.
Thursday, February 23, 2006
This assumes that you have all your images defined in images.css. I was assuming that you had random images to put in the cells. See, you must be more specific in letting us know what you want in order to get the right answers. In what I do, I have no use for the 'stock' images that are available via the setCellImage function.
Jim Hunter (www.FriendsOfAW.com)
Thursday, February 23, 2006
sorry about not being clear on the example above...i actually do have custom images i want to use, i just posted what worked initially. i changed the above example to use my custom images and now i am trying to figure out how to change this configuration to be dynamic based on a value of that row.

i reread my last post and realized it sounded harsh...i didnt mean to sound like that...i just meant that i knew alex had something that was dirt easy and i overlooked it.
L. Aragon
Friday, February 24, 2006
L ... I'm having the same problem. I can easily set the "canned" images (such as "favorites" but when I try to use my code to read a cell value and get it to display a custom image, I get a blank cell.

I posted a similar question.

Here was the code I used to try and make it work (as part of a function).

obj.setCellTemplate(new AW.Templates.Image, 11);
obj.setCellImage("http://www.domain.com/images/gen-queues/"+obj.getCellValue(11,i)+".gif",11);

Cell 11 has a value of "wood" (for example). So, I'm trying to drop in the "wood.gif" that is shorted in out /images/gen-queues folder.

Not having much luck.
Carl
Friday, February 24, 2006
Carl ass Jim mentioned, you have all your images defined in css if you use the setCellImage method.

For example:

<style>
.aw-image-myImage { background: url(images/folder.gif); }
.aw-box-image { background-repeat: no-repeat; }
</style>
Eric
Friday, February 24, 2006
Oops, accidently posted before I was done typing.

anyway, then you could use "myImage" with the setCellImage method and it would poll in "images/folder.gif".
Eric
Friday, February 24, 2006
wow, i can't type.
ass = as
poll = pull
Eric
Friday, February 24, 2006
Eric, thanks.

But, isn't that a little messy? For instance, the number of custom images just to set this up for my needs would exceed 200 images - just for one page (because I can not predetermine that I'd only use 5-10 of them on this specific grid - I have to account for all possibilities). And, I wouldn't even know how to reference the correct CSS definition based on a cell value.

There has to be a better way to implement images beyond creating 200+ CSS references - Especially since the image names are the cell values.

It just seems a little strange.
Carl
Friday, February 24, 2006
I agree, it would be nice if it could just accept a filename directly. You could create a new template based on the existing one which can accept the filename as the argument.

or you could just programmatically generate your css by going through your image directory with a perl script (or whatever you like to code your server side stuff with) and create an entry for each one so you dont have to worry about manually maintaining a list of hundereds or thousands of images in a css file. Most likely, if you went this route with a large site you would not want this to happen at runtime, you would likely just generate an images.css file and then use that to reduce the load on the application server.

Personally, I think I'd be inclined to go with the former method since the latter could chew up uneccessary amounts of bandwidth if the .css gets very big.
Eric
Friday, February 24, 2006
L ...

With Erics help and some code I found on www.friendsofaw.com, I was able to effectively replace cell values with specific icons.

I'm doing this in 6-7 columns on one grid.

If you'd like, I can send you the code as well as a link so you can view the results.

Let me know,
dafweg69@yahoo.com
Carl
Saturday, February 25, 2006



This topic is archived.

Back to /aw.ui.grid/selector-model.html

Documentation:

Forum search