Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    ListGrid and a cell with image link

    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:

    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);
                    }
                }
            };
    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:

    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;
    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:
    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 ...
                    );
        };
    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
    Attached Files
Working...
X