Image Link

Hi, i want an image to have a link that opens in a new window. My data source is an XML file. Right now i'm reading through the forum, but if someone could give a hint about this or give me a specific post it would really help, thanks!!

Rauldinho

March 2,

You should add link property to the XML datasource -

var data = new AW.XML.Table;
    data.getImage = function(col, row){...}
    data.getLink = function(col, row){
        return "http://www.google.com";
    //	or
    //	return this.getData(???, row); // value of ??? column
    //	or
    //	return this.getNode(col, row).getAttribute("url");
    }

and modify Image or ImageText template to contain an A tag instead of SPAN for the image element -

var cell = new AW.Templates.ImageText;
    var image = cell.getContent("box/image");
    image.setTag("a");
    image.setAttribute("target", "_new");
    image.setAttribute("href", function(){
        return this.getCellProperty("link");
    });

    var grid = new AW.UI.Grid;
    grid.setCellTemplate(cell);

Alex (ActiveWidgets)

March 2,

Hi alex thanks for answering, who better than you :D could you please put a complete code. Sorry for not getting it right away, please!

Rauldinho

March 6,

Here is a complete code -

<html>
<head>
    <title>ActiveWidgets Examples</title>
    <style>body {font: 12px Tahoma}</style>

    <script src="../../runtime/lib/aw.js"></script>
    <link href="../../runtime/styles/xp/aw.css" rel="stylesheet"></link>

</head>
<body>
<xml id="xmlDataIsland">
    <root>
        <row>
            <name>Some text</name>
            <description>Description text</description>
            <image>favorites</image>
            <link>http://www.activewidgets.com</link>
        </row>
        <row>
            <name>Another cell</name>
            <description>More text</description>
            <image>search</image>
            <link>http://www.google.com</link>
        </row>
    </root>
</xml>
<script>

    var table = new AW.XML.Table;
    table.setColumns(["name", "description", "image", "link"]);

    table.getImage = function(col, row){
        return this.getData(2, row); // image in col-2
    }

    table.getLink = function(col, row){
        return this.getData(3, row); // link in col-3
    }

    var xml = document.getElementById("xmlDataIsland");
    table.setXML(xml);


    // modified cell template
    var cell = new AW.Templates.ImageText;
    var image = cell.getContent("box/image");
    image.setTag("a");
    image.setAttribute("target", "_new");
    image.setAttribute("href", function(){
        return this.getCellProperty("link");
    });

    var obj = new AW.UI.Grid;
    obj.setCellTemplate(cell, 0); // show image+link in col-0
    obj.setColumnCount(2); // use 2 columns for the cell text
    obj.setRowCount(2);
    obj.setCellModel(table);
    document.write(obj);

</script>
</body>
</html>

Alex (ActiveWidgets)

March 6,

Hi Alex, i try your code but it gives me an error on line 35 saying this object doesn't accept this method. its on this line:

table.getImage = function(col, row)
{ 
    [b]return this.getData(2, row);[/b] // image in col-2 
} 

table.getLink = function(col, row)
{ 
    [b]return this.getData(3, row);[/b] // link in col-3 
}

If i comment those lines it works but it doesn't display the image of course. Do you know why is this??

Rauldinho

March 7,

This topic is archived.

Image Link

See also:

Search

New Data Grid

Version 2