how to add an image to a column (XML-data)

Hi,

The grid is filled with data from an XML-island.
Now, the first column (not the column-header), needs to have an icon-image in front of the data in the column. Every row gets the same image there. (Like the example 'grid/images.html', but then with every row having the same icon)
In addition, a mouseclick on this image should execute a JS-function.

How do I add this image to the grid, which has already been filled by the XML-island? I prefer not to add something to the XML-feed.

Thanks in advance,
Ton

What if I need to add different images based on my context. How can I add image along with teh data. I tried adding <img> tag along with the data in CSV. It works but the alignment of the row is gone and a gap appears the top of the column border image.

Any quick solutions please.

Thanks in advance.

Here is the example which may help:

//    create ActiveWidgets data model - XML-based table
    var table = new Active.XML.Table;

    //    provide data URL
    table.setURL("../data/companies-simple.xml");

    //    provide image code
    table.getImage = function(row, col){

        // same for all rows
        return "txt";

        //    if the image also stored in the XML then
        //    return this.getNode(row, col).getAttribute("image");
        //    or
        //    return this.getNode(row, col).selectSingleNode("xpath").text;
    }

    //    start asyncronous data retrieval
    table.request();

    //    create ActiveWidgets Grid javascript object
    var obj = new Active.Controls.Grid;

    //    prepare image column template
    var myColumn = new Active.Templates.Image;

    //    assing event handler to the image
    myColumn.getContent("image").setEvent("onclick", function(){
        this.action("myImageClicked");
    });

    //    assign image template to the first column
    obj.setColumnTemplate(myColumn, 0);

    //    create action handler, src is the reference to the action source
    obj.setAction("myImageClicked", function(src){
        var rowIndex = src.getItemProperty("index");
        var someData = this.getDataProperty("value", rowIndex, 2);
        alert(someData);
    });

    //    define column labels
    var columns = ["Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"];

    //    provide column labels
    obj.setColumnProperty("texts", columns);

    //    provide external model as a grid data source
    obj.setDataModel(table);

    //    write grid html to the page
    document.write(obj);