TileGrid custom tile bug?

[gstier]

SmartGWT 2.2 - TileGrid issue

I'm creating a simple web page using TileGrid to display a grid of items for sale. I'm overriding the getTile(int recordNum) method to customize the tile. I want to add a series of small buttons to the tile, for example, a detail button so the user could click the button which would open a small window showing more of the selected product details, an add to cart button, and a checkout button, etc.

Here is the issue: The TileGrid loads the data from the server and draws all the tiles correctly, including my new button, but when I filter the data by selecting a new category from a menu the data is correctly filtered, but the TileGrid does not redraw itself, and is always showing the original tiles.
If I remove the line:

tile.addChild(button);

everythings works fine.

I have tried a number of different things, such as:

// These were tried in the click handler after filtering the data
productGrid.layoutTiles();
productGrid.layoutChildren("FILTER");
productGrid.invalidateCache();
productGrid.markForRedraw();

// Tried this in the getTile method
tile.markForRedraw();

I've pasted the relevant code below.

My TileGrid definition:

        productGrid = new TileGrid() {
			@Override
			public Canvas getTile(int recordNum) {
				Canvas tile = super.getTile(recordNum);
				if(tile.getChildren().length == 0) {
					Button button = new Button("Details");
					button.setHeight(20);
					button.setWidth(40);
					
					tile.addChild(button);
				}
				return tile;
			}
        };
        productGrid.setTileWidth(230);
        productGrid.setTileHeight(250);
        productGrid.setWidth(875);
        productGrid.setTop(125);
        productGrid.setShowAllRecords(false);
        productGrid.setAutoFetchData(true);
        productGrid.setAnimateTileChange(true);
        productGrid.setLayoutMargin(35);
        productGrid.setStyleName("productGrid");
        productGrid.setDataSource(productDS);
        productGrid.setSelectionType(SelectionStyle.SINGLE);
        productGrid.setFields(getFields());
        productGrid.setTileValueStyle("tile");
        productGrid.setShowEdges(false);

Menu Click Handler

public void onRecordClick(RecordClickEvent event) {
	String selectedNode = event.getRecord().getAttribute("categoryId");
	categoryCriteria = new Criteria("categoryId", selectedNode);
	DSRequest request = new DSRequest();
	request.setTextMatchStyle(TextMatchStyle.EXACT);
	productGrid.filterData(categoryCriteria, null, request);
	productGrid.scrollToTop();
}

[Isomorphic]

Please try this with the latest (smartclient.com/builds) as 2.4 is about to be released.

[gstier]

Thanks for the quick reply.

I tried this with SmartGWT2.3 from the 12/3/2010 build and I see the same behavior.

Link to the build I'm now using:
http://www.smartclient.com/builds/SmartGWT/2.x/LGPL/2010-12-03

[Isomorphic]

Can you clarify what you mean by "showing the original tiles"? Is the display not changing at all, or were you expecting that getTile() would be called again for all tiles?

Have you verified this using one of the sample DataSources (to remove the possibility that your DataSource is returning something unexpected)?

[Lucianovici]

Hi, I am facing the same problem, using smartGWTpro 2.4

I am using a remove button over each tile. The remove button is an instance of ImgButton.

Here is my tile grid:

        TileGrid myTileGrid = new TileGrid() {
            @Override
            protected String getTileHTML(Record record) {
                String htmlString = super.getTileHTML(record);
                int index = htmlString.indexOf("<img");

                if (index > -1) {
                    String before = htmlString.substring(0, index + "<img".length());
                    String end = htmlString.substring(index + "<img".length());
                    String description = null != record.getAttribute("description") ? ": " + record.getAttribute("description") : "";
                    htmlString = before + " title='" + record.getAttribute("title") + description + "'" + end;
                }

                return htmlString;
            }

            @Override
            public Canvas getTile(Record record) {
                Canvas canvas = super.getTile(record);
                canvas.addChild(getRemoveImageBtn(record));
                return canvas;
            }

            @Override
            public Canvas getTile(int idx) {
                Canvas canvas = super.getTile(idx);
                canvas.addChild(getRemoveImageBtn(animationImageGrid.getResultSet().get(idx)));
                return canvas;
            }
        };

And the remove button is generated by this method:

    private ImgButton getRemoveImageBtn(final Record record) {
        ImgButton retBtn = new ImgButton();
        retBtn.setSrc(ObjectConstants.SMARTGWT_ICONS_URL_PATH + "remove.png");
        retBtn.setShowHover(true);
        retBtn.setPrompt("Remove tile");
        retBtn.setSize(30);
        retBtn.setMargin(5);
        retBtn.setShowFocused(false);
        retBtn.setShowRollOver(false);
        retBtn.setSnapTo("TR");
        retBtn.setShowDown(false);
        retBtn.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent clickEvent) {
                GWT.log("Removing image: " + record.getAttribute("title") + " objectId:  " + record.getAttribute("objectId") +
                        " and nodeId: " + record.getAttribute("nodeId"));
                animationImageGrid.removeData(record);
            }
        });
        return retBtn;
    }

1. getTile(Record record) is never called
2. getTile(int idx) is called to render each tile (as far as I understood)
3. If the remove button is NOT added as child to the tile grid, then the behavior is the one expected
4. If the remove button is added as child to the tile grid, the behavior is: For different fetch criteria, first rendered canvas (images) are displayed, instead of the newly fetched.
4.1 The number of tiles is adjusted, after a fetch is performed, but the canvas tiles are not.
4.2 Checked and see on client log, that if the remove icon is pressed, it refers to the desired tile record, not the one displayed.

The desired behavior is to display the correct canvas for different fetch criteria.

[Lucianovici]

I would appreciate an answer. Please!

Thanks in advance.

[Isomorphic]

Changes have been made in this area today - please retest with the next nightly build (June 1st)

[gstier]

I'm using the SmartGWT 2.5 nightly build from June 13th and I have the same issue. Using debug statements it appears that the data for the Tilegrid is correct, but the tiles do not redraw, so the tiles always appear to be the original tiles.

[Isomorphic]

Can you show a test case for the problem you're seeing?

[gstier]

This issue is a bit hard to describe in words, so I have posted an example to look at.

Steps to reproduce:

Working version:

Visit http://www.carsonsbay.com

1. Click Computers from the menu and select the first item: Computer Speakers.
2. Click on the first tile in the grid. You should see a small pop showing some information about the item you just clicked on.
3. Click on Computers from the menu and select the second item: Desktops. The tile grid should load a new bunch of tiles displaying desktops instead of computer speakers.
4. Click on the first tile in the grid and again you will see a pop up showing some info about that item.

Non working version:

Visit: http://5.carsonsbay.appspot.com

1. Click Computers from the menu and select the first item: Computer Speakers.
2. Click on the first tile in the grid. You should see a small pop showing some information about the item you just clicked on.
3. Click on Computers from the menu and select the second item: Desktops. The tile grid is supposed to load a bunch of new tiles showing desktops, but you will notice that the tiles do not change.
4. Click on the first tile in the grid and you will notice that it does not show you a pop up for the item that appears in the grid, but rather it is showing the correct item in the popup. It would appear that the data backing the grid is correct, but the display is incorrect.

The only difference between those two versions of the code is the following snippent:

        productGrid = new TileGrid() {
			@Override
			public Canvas getTile(int recordNum) {
				Canvas tile = super.getTile(recordNum);
				Button button = new Button("Details");
				button.setHeight(20);
				button.setWidth(40);
				button.setTop(200);
				tile.addChild(button);
				
				return tile;
			}
        };

In fact, if I take out the line

tile.addChild(button);

then everything works as you would expect.

The code in these examples is using SmartGWT version 2.2, but I have tested it with multiple versions including the nightly build from June 13 2011 and the behavior is the same.

Hope this helps.

[Isomorphic]

Hi gstier, thanks for the effort but what we really need is a minimal standalone test case that we can run to see the problem. Should be a single file that can be dropped into the standard SDK and contains no more code than is necessary to demonstrate unexpected behavior.

[gstier]

I understand and I will try to come up with that when I have some time, right now I'm rather busy. I hope you did look at my example though, as it is the most clear illustration of the problem I have at the moment.

[Isomorphic]

Hi GStier
We've reproduced the problem and believe we've added a fix. Please try the next nightly build and let us know if you continue to see it

Regards
Isomorphic Software.

[abbhi131]

Hi

I dont feel that the fix was efficient. I'm still getting the problem. The update of the tile record in tile grid is not what is expected. Please try solving the prob.

[Isomorphic]

@abbhi if you're having a problem, read the FAQ for what information you should provide.