Images inside cells?

Hi, if I provide my data to the grid via CSV, can I have one (or more) columns set to display an image that is specified in one of the columns of the CSV?

That is, if my CSV looks like this:

"1","image1","Some text"
"2","image2","More text"
"3","image3","Even more"

And so I want the grid to render a <img> tag inside column two and prepend the path to the images and append a .jpg, is that possible? I can't see how to do that. Thanks!

The examples (examples/grid elements - cells/images.htm shows how to display images using style sheets. If all the images are known up front this would be the way to go (combine with examples/grid data - csv text file/basic.htm). However, if you must use an image the following shows how to do it although in theory you should know what images are available in your web app so create style sheet entries should not be a big deal.

<html>

<head>

    <title></title>

    <style>body {font: 12px Tahoma}</style>

    <script src="../../runtime/lib/aw.js"></script>

    <link href="../../runtime/styles/xp/aw.css" rel="stylesheet"></link>

<style>

    #myGrid {height: 200px; width: 500px;}

    #myGrid .aw-grid-row {border-bottom: 1px solid threedlightshadow;}

    #myGrid .aw-grid-cell {border-right: 1px solid threedlightshadow;}

</style>

</head>

<body>

<script>

    ImageTemplate = AW.Templates.ImageText.subclass();

    ImageTemplate.create = function(){

        var obj = this.prototype;

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

        image.setTag("img");

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

        image.setAttribute("src", function() {

            if (this.$0 != null && this.$1 != null) {

                return "../images - adding new/" + this.$owner.getCellText(this.$0, this.$1);

            }

            return "";

        });

        obj.setContent("box/image", image);

        obj.setContent("box/text", "");

    };

    var table = new AW.CSV.Table;

    table.setURL("image.csv");

    table.request();

    var obj = new AW.UI.Grid;

    obj.setId("myGrid");

    var columns = ["Number", "Image", "Text"];

    obj.setCellTemplate(new ImageTemplate, 1);

    obj.setHeaderText(columns);

    obj.setColumnCount(3);

    obj.setCellModel(table);

    document.write(obj);

</script>

</body>

</html>

Bryn, thank you very much I will try it this evening!

I cannot define each image in my CSS file because each row has a unique image associated with it, and there are thousands of rows. I'm anxious to see how quickly (or slowly) it renders as I scroll down with the virtual grid. I played with it yesterday without the images, very nice. It does look a bit clunky as you scroll but this is by far the best grid I've seen for doing this.

Forum search