Image Link

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

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!

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>

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

Forum search