Change Icon in ListGridField

[thalles]

Hi there,

I've got a ListGrid with some ListGridFields. In one of these fields an icon is shown. The ListGridFieldType of that field is ICON. I now want to exchange the icon, when the user clicks on this field. However, this seems to be a big problem with smartgwt.

I've tried to simply call setIcon(String iconURL) again (I've set the icon in this way when the ListGrid is build for the first time), but this doesn't work.
setCellIcon(String iconURL) behaves in the same way.

I've tried to call refreshCell(rowNum, colNum); after the new icon url was set or even redraw() the whole ListGrid but this doesn't change the icon image either. refreshFields() gives the some result.

The thing is, that the icon url is changed for smartgwt (at least when I call getIcon() it returns the correct url). However, if I examine the DOM tree directly, there is still the wrong URL set in the "src" tag of that element and consequently the icon doesn't change.

Anybody has an idea? Any help much appreciated!

Best regards,
Henry

[Isomorphic]

Set the attribute on the ListGridRecord and refresh the cell.

[thalles]

I've tried to set it in this way:

ListGridRecord record = (ListGridRecord)event.getRecord();
record.setAttribute(attributeName, newImageURL);
listGrid.refreshCell(event.getRecordNum(), event.getFieldNum());

But this doesn't work. I've tried "src" and "icon" as attributeName. The attribute was set, but the image doesn't change. I'm not sure if it works at all, because there is no attribute "src" or "icon" before I set it.

Any help appreciated!

Bye Henry

[thalles]

I've solved it now by directly editing the DOM tree with GWT.

But I think there must be a much more elegant solution!

NodeList<Element> nodes = RootPanel.getBodyElement().getElementsByTagName("img");
for (int i = 0; i < nodes.getLength(); i++) 
{
	Element element = nodes.getItem(i);
			
	if(element.getAttribute("src").equals(oldURL)
	{
		Element parentTDElement = element.getParentElement().getParentElement().getParentElement();
		GWT.log("class name: " + parentTDElement.getClassName());
		
                if(parentTDElement.getClassName().startsWith("cellSelected")) //apply only to the selected cell
		{
			element.setAttribute("src", newURL);
			GWT.log("src for img tag changed to: " + element.getAttribute("src"));
		}
        }
	else if(element.getAttribute("src").equals(newURL)
	{
		Element parentTDElement = element.getParentElement().getParentElement().getParentElement();
		GWT.log("class name: " + parentTDElement.getClassName());
		if(parentTDElement.getClassName().startsWith("cellSelected")) //apply only to the selected cell
		{
			element.setAttribute("src", oldURL);
			GWT.log("src for img tag changed to: " + element.getAttribute("src"));
		}
	}
}

Any help still appreciated!

Bye Henry

[Isomorphic]

Again, you need to set the attribute on the ListGridRecord and refresh the cell. In the field type icon, it tells you to use valueIcons if the icon to show depends upon the field value. A closer read of the docs will avoid useless DOM hacking.

[thalles]

Hello Isomorphic,

first of all, thanks for your help again!

I've tried to use value icons now, but I can't get it to work. I've searched the docs, the Internet and the forum but I couldn't find a simple working example. Maybe you could post some code?

Here is what I've tried

final ListGridField wmsGetFeatureInfoField = new ListGridField("wmsGetFeatureInfoField", "WMS get feature info");
wmsGetFeatureInfoField.setType(ListGridFieldType.ICON);
Map<String, String> valueIcons = new HashMap<String, String>();
valueIcons.put("false", inactiveURL);
valueIcons.put("true", activeURL);
wmsGetFeatureInfoField.setValueIcons(valueIcons);
wmsGetFeatureInfoField.setImageURLPrefix(GWT.getModuleBaseURL() + "imagesMap/");
wmsGetFeatureInfoField.setImageURLSuffix(".png");
wmsGetFeatureInfoField.setDefaultValue("true");
wmsGetFeatureInfoField.setValueIconWidth(20);
wmsGetFeatureInfoField.setWidth(20);

Looking with the DOM inspector in Firefox, the table representing the listgrid field doesn't even have an "img" tag.

Any help appreciated!

Bye Henry

[Isomorphic]

Now that you're using valueIcons, don't use a field type of icon.

[thalles]

I've tried it without field type icon. That doesn't help.

Bye Henry

[Isomorphic]

Feature definitely works, you may have a data problem. Sorry, we can't spend more time on this, if you need further help, look into commercial support.