:: Forum >> Version 2 >>

When image names are not known...

More information on this topic is available in the documentation section: /grid.howto.cells/images.html.

How do you suggest handling images when the names are not known until runtime? Perhaps build the CSS on-the-fly and write it to the document before calling functions to display them in the grid?

Thanks,

Ken
Sunday, February 3, 2008
You can modify the cell template to use image URL instead of the css name. You should get access to the image span -

var image = cell.getContent("box/image");

replace the current 'image' class with some static value

image.setClass("image", "url");

possibly add some formatting rules to this class (in css)

.aw-image-url {
width: 16px;
height: 16px;
}

and add dynamic style which links to the image files -

image.setStyle("background-image", function(){
var path = this.getCellProperty("image");
return "url(" + path + ")";
});

Here is the complete code -

<style>

.
aw-image-url {
    
width16px;
    
height16px;
}

</
style>
<
script>

    var 
cell = new AW.Templates.ImageText;
    var 
image cell.getContent("box/image");
    
image.setClass("image""url");
    
image.setStyle("background-image", function(){
        var 
path this.getCellProperty("image");
        return 
"url(" path ")";
    });


    var 
obj = new AW.UI.Grid;
    
obj.setCellText("text");
    
obj.setColumnCount(10);
    
obj.setRowCount(10);

    
obj.setCellTemplate(cell1);
    
obj.setCellImage("world.gif"1);

    
document.write(obj);

</
script>
 
Alex (ActiveWidgets)
Monday, February 4, 2008



This topic is archived.

Back to /grid.howto.cells/images.html

Documentation:

Forum search