3.2.0

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.
StefK
February 26,
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.
StefK
February 26,
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>
Alex (ActiveWidgets)
February 26,
Thanks. Much appreciated, Alex.
StefK
February 27,
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
StefK
February 27,
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.
Alex (ActiveWidgets)
February 27,
Will do, thanks.
Any info on possibly eliminating those two niggles I mentioned?

Enjoy the day.
StefK
February 27,
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
StefK
February 27,
>> 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)?
Alex (ActiveWidgets)
February 27,
Thanks for the trouble Alex, but I'm sure it must be a glitch on my side then.
Enjoy the day, and thanks again.
StefK
February 28,

This topic is archived.

See also:


Back to support forum