:: Documentation >>

Images

Using images in AW grid and other AW controls requires defining them first in CSS file. You have to choose a name for each image and declare a CSS class which links each name to the particular image file (or region inside the image file). The CSS class is composed of aw prefix, image in the middle and the name at the end - .aw-image-name. For example,

.aw-image-home      {background: url(home.png)}
.aw-image-favorites {background: url(favorites.png)}
.aw-image-search    {background: url(search.png)}
.aw-image-fontsize  {background: url(fontsize.png)}

It is possible to put all images into one big file (easier for pre-loading) and use x-y offsets to address required part of the image -

.aw-image-home      {background: url(icons.png)  -40px 0px;}
.aw-image-favorites {background: url(icons.png)  -80px 0px;}
.aw-image-search    {background: url(icons.png) -120px 0px;}
.aw-image-fontsize  {background: url(icons.png) -160px 0px;}

After the images are declared in CSS you can assign them to the cells with setCellImage() method.

obj.setCellImage("favorites", 1, 1);

You also have to use the cell template which displays images - the default one, AW.Templates.Text, does not.

obj.setCellTemplate(new AW.Templates.ImageText, 1);
obj.setCellTemplate(new AW.Templates.Image, 2);

Comments

Image with hyperlink Emmanuel (5)
When image names are not known... (1)
Setting small images so they do not repeat Chris Coulthard (0)
how do i add an image to the first column based on cell value? loo (2)

Documentation:

Recent changes:

2.6.4
2.6.3
2.6.2
2.6.1
2.6.1
2.6.0
2.5.0 - 2.5.6
2.5.6
2.5.0 - 2.5.5
2.5.5