Creating an Image ListGridField

[KenS]

Hi. I have a datasource, and one of the fields (called 'screenshot') is in my datasource. The field is a varchar with the URL.

I tried to *not* create all the ListGridFields in the constructor, but rather let the SmartGWT code determine the fields itself from the datasource XML(which is a great feature!). Since I need to specify this field as type Image, I added an onDraw handler, and used the following code:

ListGridField screenshotField = myGrid.getField("screenshot");
screenshotField.setType(ListGridFieldType.IMAGE);
screenshotField.setImageSize(65);
screenshotField.setImageURLPrefix("http://mywebsite/images/");

Unfortunately, the field still shows as a text field, with the values of the image names ('abc.gif', etc.).

What am I doing wrong? The table (datasource) has many fields, and I'd prefer not creating each one as a ListGridField and then adding them all to the ListGrid, if possible...

Thanks.

-Ken

[Isomorphic]

You can declare this field as type:"image" in the DataSource, you can also redeclare just this one field and use setUseAllDataSourceFields() so that all normal DataSource fields are still included.

[KenS]

Thanks -- that worked great. Is there a recommended way (considering what I am trying to do here) to perform operations on Fields such as adding a HoverCustomizer or calling setShowHover(), or setting the order of the fields?

Right now I call those methods in an onDrawHandler added to the grid. Is this called every time the window is resized and/or come into focus? If so, is there a way to set those field attributes in the constructor?

[Isomorphic]

With setUseAllDataSourceFields(true), you would call setFields() with just the field definitions you want to override. Generally you would do this from the constructor.

[kevboy]

I'm doing a similar thing but using a ListGrid without a datasource. My code and the results of it are similar to what KenS posted. Any ideas of why the text is showing up and not the image? I inspected the generated code in the developer console and I didn't see an img tag.

[Isomorphic]

No, nothing we can guess from that description. If you aren't using a DataSource and the field is of type "image" there's no other way it can render. Let us know if you can isolate this to a test case.

[kevboy]

Here is my code. We just upgraded to SmartGWT 2.4 Power (but it was happening in 2.3 EE 9-28-10 nightly too). Same issue occurs in IE7 and Chrome.

ListGridField statusField = new ListGridField("status"/*, 25*/);
statusField.setType(ListGridFieldType.IMAGE);

ListGridField nameField = new ListGridField("name");

summaryGrid = new ListGrid();
summaryGrid.setHeight(200);
summaryGrid.setWidth(125);
summaryGrid.setShowHeader(false);
summaryGrid.setSnapEdge("BR");
summaryGrid.setSnapTo("TR");
summaryGrid.setFields(statusField, nameField);
summaryGrid.setLeaveScrollbarGap(false);

ListGridRecord r = new ListGridRecord();
r.setAttribute("name", "test");
r.setAttribute("status", "green.png");
summaryGrid.setData(new ListGridRecord[] { r });

mainLayout = new HLayout();
mainLayout.setWidth100();
mainLayout.setHeight(20);
mainLayout.setAlign(Alignment.RIGHT);
mainLayout.addMember(summaryGrid);

[Isomorphic]

We're not seeing this behavior against the 2.4 or 2.5 release - your code sample (tweaked only in that we added it to an entry point class and called mainLayout.draw()) renders out an IMG tag as expected.

Here's exactly the entry point class we used to attempt to reproduce this behavior:

package com.foo.moo.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.types.Alignment;
import com.smartgwt.client.types.ListGridFieldType;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.grid.ListGridField;
import com.smartgwt.client.widgets.grid.ListGridRecord;
import com.smartgwt.client.widgets.layout.HLayout;

public class StringEnumTest implements EntryPoint {
    
    public void onModuleLoad () {
        
        ListGridField statusField = new ListGridField("status"/*, 25*/);
        statusField.setType(ListGridFieldType.IMAGE);

        ListGridField nameField = new ListGridField("name");

        ListGrid summaryGrid = new ListGrid();
        summaryGrid.setHeight(200);
        summaryGrid.setWidth(125);
//        summaryGrid.setShowHeader(false);
        summaryGrid.setSnapEdge("BR");
        summaryGrid.setSnapTo("TR");
        summaryGrid.setFields(statusField, nameField);
        summaryGrid.setLeaveScrollbarGap(false);

        ListGridRecord r = new ListGridRecord();
        r.setAttribute("name", "test");
        r.setAttribute("status", "green.png");
        summaryGrid.setData(new ListGridRecord[] { r });

        HLayout mainLayout = new HLayout();
        mainLayout.setWidth100();
        mainLayout.setHeight(20);
        mainLayout.setAlign(Alignment.RIGHT);
        mainLayout.addMember(summaryGrid);
        
        mainLayout.draw();
    }

}

We tested this in Firefox

If you use the above entry-point class, do you still see the first column showing a text value rather than rendering an HTML img tag?

Can you verify exactly what version you're seeing this behavior with (if you evaluate "isc.version" in the developer console, what do you see?)

[kevboy]

Figured out that we were using an extended ListGrid class that overrode the cell formatter. Removed that and it worked fine.