image link

I want to add hyperlink only in the image and not in the cell.
Can any one let me know how to implement this.

Sanjay Sharma

April 24,

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

Alex (ActiveWidgets)

April 24,

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>

SS

April 25,

This topic is archived.

image link

See also:

Search

New Data Grid

Version 2