ActiveWidgets • image link

It is possible changing the image span into a hyperlink -

var imageLink = new AW.Templates.ImageText;

    imageLink.getContent("box/image").setTag("a");

    imageLink.getContent("box/image").setAttribute("href", function(){

        return this.getCellProperty("link");

    });

Full example -

var obj = new AW.UI.Grid;

    obj.setCellData("cell");

    obj.setHeaderText("header");



    obj.setColumnCount(10);

    obj.setRowCount(10);





    var imageLink = new AW.Templates.ImageText;

    imageLink.getContent("box/image").setTag("a");

    imageLink.getContent("box/image").setAttribute("href", function(){

        return this.getCellProperty("link");

    });



    obj.setCellTemplate(imageLink, 0);



    obj.setCellImage("favorites");

    obj.setCellLink("http://www.google.com");



    document.write(obj);

Thanks for the reply, But when i implement this code. I cannot see the images.
would you please rectify the proble I have made in this code.

<BODY>



<div id="1" style="width:930px;height:200px;overflow:auto">

<SCRIPT>



//var table = new Active.XML.Table; 

//table.setXML(xmldata); 





    //    create ActiveWidgets Grid javascript object

    var obj = new AW.Grid.Extended;



    //    define data formats

    var str = new AW.Formats.String;

    var num = new AW.Formats.Number;



    obj.setCellFormat([str, str, num, num, num]);



    //    provide cells and headers text

    obj.setCellText(myData);

    obj.setHeaderText(myColumns);



    //    set number of rows/columns

    obj.setRowCount(20);

    obj.setColumnCount(8);



    //    enable row selectors

    obj.setSelectorVisible(true);

    obj.setSelectorText(function(i){return this.getRowPosition(i)+1});



    //    set headers width/height

    obj.setSelectorWidth(28);

    obj.setHeaderHeight(20);



    obj.setCellEditable(false);



    obj.setFixedLeft(1);

    obj.setVirtualMode(false);



    obj.setSelectionMode("single-row");







    obj.setCellLink(function(i, j){ return "http://www.mysite.com?i="+i+"&j="+j; }, 5);    // set data  

    obj.setCellTemplate(new AW.Templates.Link, 5);    // and template  

    obj.setCellLink(function(i, j){ return "http://www.mysite.com?i="+i+"&j="+j; }, 6);    // set data  

    obj.setCellTemplate(new AW.Templates.Link, 6);    // and template  





    var imageLink = new AW.Templates.ImageText; 

    imageLink.getContent("box/image").setTag("a"); 

    imageLink.getContent("box/image").setAttribute("href", function(){ 

        return this.getCellProperty("link"); 

    }); 



    obj.setCellTemplate(imageLink, 7); 



for (var i=0; i<obj.getRowCount(); i++)

{

    obj.setCellText("<img src='EDITICON.GIF' BORDER='0'>", 5, i);

    obj.setCellTooltip("Edit",5,i);  

    obj.setCellText("<img src='delicon.GIF' BORDER='0'>", 6, i);  

    obj.setCellTooltip("Delete",6,i);  

    obj.setCellImage("EDITICON.GIF",7,i); 

    obj.setCellLink("http://www.google.com",7,i); 

    obj.setCellTooltip("Extra : "+(i+1),7,i)

}



    //    write grid html to the page

    document.write(obj);



    obj.setSelectedRows([8]);     

    obj.setCurrentRow(8-4); // -4 = rownumber of the selected row when autoscroll

    </script>



</div></BODY>

image link

Forum search