Setting Cell Image question

In my grid, I have Column 11 with a VALUE of "wood", "oil", "solar", etc
Those display fine.

I'm trying to REPLACE thsoe text values with their cooresponding images (as provided to me by our Creative Services department.

THIS CODE WORKS and replaces the ext with the "favorites" image
obj.setCellTemplate(new AW.Templates.Image, 11);
obj.setCellImage("favorites",11);

MY CODE DOES NOT: In the second line, I'm reading the original value of Column 11 ("wood" and trying to replace it with the fully qualified path to where the wood.gif resides). What I get is just blank cells in Column 11.

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

Does anyone see what I'm doing wrong?

Oh, as an FYI, the above two block are in a javascript loop - "i").
Does anyone know how I'd code this to make it happen right as the grid gets displayed for the first time? Right now, I have to click on a button to make the function click off.

Any help would be greatly appreciated. I've been struggling with this for a while.

Carl

February 24,

I answered this question in another thread where you asked the same question:

http://activewidgets.com/javascript.forum.12210.14/how-do-you-add-an.html

Eric

February 24,

You did.

The answer just seems a little awkward and impactical. Not that I'm slamming you. It just doesn't seem like a good design and seems like it causes other problems ... for something so simple.

I do appreciate your inputy hwoever. I might have to give it a try and later argue it out with Alex (grin).

Carl

February 24,

Carl,
Your question was answered on the other thread, no need to start a new one because you didn't like the answer. You can not pass in a URL to setCellImage, period, end of story. It doesn't matter if you think you should be able to or not, you can't. If you want to use setCellImage then you are goin to have to define those images in the CSS file like Eric suggested. I did it and it isn't that hard, there is one exception that you HAVE to follow, the images have to be 18 x 18 pixels in size. I found that any other size and the images won't display.
If you want to pass in a URL then you are going to have to use setCellText("<img src=your_url>" + any_text_you_want_to_display, COL, ROW);
Sorry if you don't like the answer but there it is.

Jim Hunter (www.FriendsOfAW.com)

February 27,

I would forget the image template in this case and use something like:

imgref="<img src=http://www.domain.com/images/gen-queues/"+obj.getCellValue(11,i)+".gif>";
obj.setCellText(imgref,11);

Rob Francis

February 27,

As Jim stated, you can't use the URL, you must decalre it in the style

<style>
.aw-image-[b]myimg[/b] { background:url(http://www.mydomain.com/images/myimg.gif) no-repeat; }
</style>

Then you set the template and call the setCellImage with the image from the style you want to load

obj.setCellTemplate(new AW.Templates.Image, 2);
obj.setCellImage("[b]myimg[/b]",2);

Tony

February 27,

Sorry guess you can't bold within the CODE tag, you get the picture.

Tony

February 27,

Here is a working example using the url to display the image

<html>  
<head>  
    <script src="runtime/lib/aw.js"></script>  
    <link href="runtime/styles/xp/aw.css" rel="stylesheet"></link>  
</head>  
<body>  

<style> 
    #myGrid { width: 300px; height:150px;  margin: 0px; padding: 0px} 
</style> 
<script> 
    var HeaderText = ["Number","Description"]; 
    var CellText = [ 
        ["1","Description 1"], 
        ["2","Description 2"], 
        ["3","Description 3"], 
        ["4","Description 4"], 
        ["5","Description 5"], 
    ]; 

    var obj = new AW.UI.Grid; 

    obj.setId("myGrid"); 
    obj.setHeaderText(HeaderText); 
    obj.setCellText(CellText); 
    obj.setColumnCount(2); 
    obj.setRowCount(5); 
    obj.setVirtualMode(false); 


    document.write(obj); 

    obj.setCellText("<img src=\"http://us.i1.yimg.com/us.yimg.com/i/us/we/31/b/28.gif\">",1,0);
    obj.setCellText("<img src=\"http://us.i1.yimg.com/us.yimg.com/i/us/we/31/b/29.gif\">",1,1);
    obj.setCellText("<img src=\"http://us.i1.yimg.com/us.yimg.com/i/us/we/31/b/30.gif\">",1,2);
    obj.setCellText("<img src=\"http://us.i1.yimg.com/us.yimg.com/i/us/we/31/b/31.gif\">",1,3);
    obj.setCellText("<img src=\"http://us.i1.yimg.com/us.yimg.com/i/us/we/31/b/32.gif\">",1,4);
</script>

</body> 
</script> 
</html>

Rob Francis

February 27,

Thanks a bunch guys.
It is very helpful.

Been stressing over these things after day and day of trying.

Carl

February 27,

This topic is archived.

Setting Cell Image question

See also:

Search

New Data Grid

Version 2