xml - (images in grid III)

Am having difficulty displaying images in the grid when loading data from an xml file. Am wondering if somebody has done this who wouldn't mind posting their implementation code?

What you need to do is define your images in the CSS (see /source/styles/classis/images.css), change column template to Active.Templates.Image (as in /examples/grid/images.htm) and overload the getImage method on the XML data model - something like

table.getImage = function(i, j){
return "imagecode";
}

Unfortunately I did not provide easy methods for accessing either current node or the XML document (I will add them to the next release together with the full XML image example). So in the meantime you need either grab XML ( http://www.activewidgets.com/messages/548-1.htm ) and do your own XPath, or define an image code in the extra column and substitute it into getImage method.

This worked for me in both ie and firefox.
The xml text for the image is a url that points to a 16x16 icon.

<xml>
<securities>
<security id="888S77765">
<name><![CDATA[Nat West]]></name>
<symbol>RBS</symbol>
<currency>../images/t_GBP.gif</currency>
<priceDateRange>.....</priceDateRange>
</security>
</securities>
</xml>

var table = new Active.XML.Table;
var grid = new Active.Controls.Grid;

if (!window.My) My=[];
if (!My.Templates) My.Templates=[]; 	

My.Templates.Image = Active.System.Control.subclass();
My.Templates.Image.create = function(){
    var subClass = this.prototype;
    subClass.setClass("templates","image");
    var image = new Active.HTML.IMG;
    image.setAttribute("src",function(){return this.getItemProperty("text");});
    image.setAttribute("align","middle");
    subClass.setContent("image", image);

};
My.Templates.Image.create(); 

    //	create data formats
    var string = new Active.Formats.String;
    date.setDataFormat("ISO8061");
    //	create ActiveWidgets data model - XML-based table
    //	provide data URL
    table.setURL("//:server/somexml?");
    //set rows XPath
    table.setRows("//securities/*");
    //set columns XPath
    table.setColumns(["name","symbol", "currency", "priceDateRange"]);
    //set column formatting
    table.setFormats([string, string, null, string]);
    //start asyncronous data retrieval
    table.request();
    var columns = ["Company Name", "Sym", "Curr", "Data Range"];
    grid.setColumnTemplate(new My.Templates.Image, 2);
    grid.setColumnProperty("texts", columns);
    document.write(grid);

Hatt, your template is great! However, if the "currency" node is missing or if it contains an empty string, IE displays the red "X" image which indicates that the image can't be found. Is there any way we can change your template so that it doesn't output the "img" tag when the node is missing or empty?

Can anyone tell me how to make this template work so that a mouse over will change the image to a different image.

SO the initial image is passed by XML, the mouse over loads.. lets say ".\mouseover.jpg", and when the mouse is no longer over the image, it changes back to the origianal image from xml.


Thanks.

Hi there can you please provide a full example with code thanks.