Hello,
On my page I have a ListGrid with several columns, which fetches data from server via REST data source.
One column contains ID of an object in external, 3rd party system, and I'd like this column to display an icon and link to an object's page.
Problem is that I have no idea how to create a ListGrid column which displays icons with links. One of things I tried is overriding createRecordComponent, but still it does not work as I'd like to.
My list grid is created in following way:
Icon is there and works correctly (i.e. it opens 3rd party page in a new tab), but I cannot understand why first columns contains not only an icon, but also a text, and how to get rid of it (see attachment).
What's more, I'd like to have a regular <a> element with an embedded image and href attribute, and not a button which invokes click action by java script. Having such, one can right-click on an image and select 'Copy link address' from browser menu. I tried another approach, with a Label instead of a ImgButton:
But result is the same - icon is displayed and contained in a correct link, but cell also contains a text.
Fields are retrieved from data source (no explicit ListGriedField objects created) in a following way:
So, questions are:
1. Why column contains not only a button (or label), but also a text?
2. How can I create a link with an image in a ListGrid cell, or anywhere in general?
3. Maybe I am missing something and should do some things in a totally different way?
My SmartGWT version is: SmartClient Version: v9.1p_2014-05-31/LGPL Development Only (built 2014-05-31)
Thank you and best regards,
Maciek
On my page I have a ListGrid with several columns, which fetches data from server via REST data source.
One column contains ID of an object in external, 3rd party system, and I'd like this column to display an icon and link to an object's page.
Problem is that I have no idea how to create a ListGrid column which displays icons with links. One of things I tried is overriding createRecordComponent, but still it does not work as I'd like to.
My list grid is created in following way:
Code:
grid = new ListGrid(SegmentsDs.INSTANCE) {{ //...some initialisation stuf... setShowRecordComponents(true); setShowRecordComponentsByCell(true); } @Override protected Canvas createRecordComponent(ListGridRecord record, Integer colNum) { String fieldName = getFieldName(colNum); if(fieldName.equals(SegmentFields.FIELD_STRAVA_ID)) { String segmentId = record.getAttributeAsString(fieldName); final String url = "http://www.strava.com/segments/" + segmentId; ImgButton button = new ImgButton(); button.setSrc("strava.ico"); button.setSize(16); button.setShowDown(false); button.setShowRollOver(false); button.setShowTitle(false); button.setLayoutAlign(Alignment.CENTER); button.setPrompt("Open Strava"); button.addClickHandler(new ClickHandler() { @Override public void onClick(ClickEvent event) { Window.open(url, "_blank", null); } }); return button; } else { return super.createRecordComponent(record, colNum); } } };
What's more, I'd like to have a regular <a> element with an embedded image and href attribute, and not a button which invokes click action by java script. Having such, one can right-click on an image and select 'Copy link address' from browser menu. I tried another approach, with a Label instead of a ImgButton:
Code:
String content = "<a href='http://www.strava.com/segments/" + segmentId + "'>" + Canvas.imgHTML("strava.ico", 16, 16) + "</a>"; logger.fine(content); Label l = new Label(content); l.setHeight(20); l.setWidth100(); return l;
Fields are retrieved from data source (no explicit ListGriedField objects created) in a following way:
Code:
public class SegmentsDs extends AbstractDataSource { public static final SegmentsDs INSTANCE = new SegmentsDs(); protected SegmentsDs() { DataSourceIntegerField id = new DataSourceIntegerField(SegmentFields.FIELD_DB_ID); id.setPrimaryKey(true); id.setHidden(true); DataSourceTextField strava_id = new DataSourceTextField(SegmentFields.FIELD_STRAVA_ID); DataSourceTextField name = new DataSourceTextField(SegmentFields.FIELD_NAME); name.setValidOperators(OperatorId.ICONTAINS, OperatorId.ISTARTS_WITH, OperatorId.ENDS_WITH, OperatorId.IEQUALS, OperatorId.IREGEXP); //... other fields... setFields( id, strava_id, name, ... other fields ... ); };
1. Why column contains not only a button (or label), but also a text?
2. How can I create a link with an image in a ListGrid cell, or anywhere in general?
3. Maybe I am missing something and should do some things in a totally different way?
My SmartGWT version is: SmartClient Version: v9.1p_2014-05-31/LGPL Development Only (built 2014-05-31)
Thank you and best regards,
Maciek