:: Forum >>

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


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,
Thursday, February 3, 2005
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.
Wednesday, February 9, 2005
Here is the example which may help:

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

    // provide data URL

    // 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

    // 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(){

    // 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);

    // 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

    // write grid html to the page
Alex (ActiveWidgets)
Thursday, February 10, 2005

This topic is archived.

Back to support forum

Forum search