Dynamic URL Image in Ver 2 using a custom Template

Hi,

I'm trying to get a dynamically assigned URL images to work in the grid (version 2.0) using a modified version 1 image template I got from the forum. (http://www.activewidgets.com/javascript.forum.560.5/xml-images-in-grid-iii.html)

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

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

Applied by :

grid.setCellTemplate(new My.Templates.Image, 0);

for example.

However the statement "return this.getItemProperty("text");" generates an error saying getItemProperty is not a function.

I am not very familiar with the internal class workings of AW version 2, so can Alex (or anyone else) please explain how has changed in the version 2 model, and then how can I update this template to work properly?

Many thanks in advance.

Part 2:
I have also picked up some rumors in the forums with regards to the maximum image size that can be used (I think 18x18 px).
Is there any provision for using arbitrarily sized images in the grid (with a view to an "product catalogue" type application of the grid.)

Thanks again.

It would be more simple to modify (subclass) existing ImageText (or Image) template rather than starting from scratch. You just have to replace the span with background image mapped through the css class with an actual IMG tag.

<style>

.aw-templates-myimage img {
    margin-right: 4px; /* space between image and text */
}

</style>
<script>

var MyImageTemplate = AW.Templates.ImageText.subclass();

MyImageTemplate.create = function(){

    var obj = this.prototype;

    obj.setClass("templates", "myimage");

    var image = new AW.HTML.IMG;
    image.setAttribute("src", function(){
        return this.getControlProperty("image"); 
    });

    obj.setContent("box/image", image);

}

    var grid = new AW.UI.Grid;
    grid.setCellData("cell");
    grid.setHeaderText("header");
    grid.setColumnCount(10);
    grid.setRowCount(10);
    grid.setRowHeight(30);

    grid.setCellTemplate(new MyImageTemplate, 0);
    grid.setCellImage("world.gif", 0);  // put image URL into cell image

    document.write(grid);

</script>

Thanks. Much appreciated, Alex.

Back again... :-)

I have used and modifed your example as follows :

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

        My.Templates.Image = AW.Templates.ImageText.subclass();
        My.Templates.Image.create = function(){
            var obj = this.prototype;
            obj.setClass("templates", "myimage");
            var image = new AW.HTML.IMG;
            image.setAttribute("src", function(){
                return this.getControlProperty("text"); 
            });
            obj.setContent("box/image", image);
            obj.setContent("box/text", "");
        }
        My.Templates.Image.create();

,
and it is working nicely, but I have found two minor niggles.

1) I get a Javascript error on the line 'obj.setClass("templates", "myimage");' saying that setClass is not a function.
2)The column header shadow of the column containing the images disappears for some reason. (I have tested with the AW.Templates.Image template as well and the same happens...)

Any more help would be appreciated.
Thanks

You should remove My.Templates.Image.create() line. In AW 2.0 the class initialization (calling create() method) happens on-demand, when the first instance of that class is created. This process also initializes the parent classes if necessary.

Will do, thanks.
Any info on possibly eliminating those two niggles I mentioned?

Enjoy the day.

My apologies.
The "setClass is not a function" message is no more, with the "create" on demand fix, but the column header shadow remains MIA. Is this an intended feature?

Thanks again

>> The column header shadow of the column containing the images disappears

I cannot reproduce this (or maybe I don't understand what you mean). Could you give more details (which theme, browser, code example)?

Thanks for the trouble Alex, but I'm sure it must be a glitch on my side then.
Enjoy the day, and thanks again.