3.2.0

When image names are not known...

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
February 3,
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 {
    width: 16px;
    height: 16px;
}

</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(cell, 1);
    obj.setCellImage("world.gif", 1);

    document.write(obj);

</script>

Alex (ActiveWidgets)
February 4,

This topic is archived.

See also:


Back to support forum