Slow script warning IE with Listgrid scrolling

[Sytematic]

Hello,

I have a Listgrid, showing 9 columns, and about 80 rows. It loads the data on-demand, which is fine. But in IE, it gives me the

'warning the script is slow, do you want to stop it?' (or at least the dutch version, so not keen on the exact english text)

Is there a way to NOT trigger this warning? I do have some rendering calculations, here is how I initialize my Listgrid. It basically renders some facebook/twitter buttons and it makes the background of the cell have the same colour as chosen with the color picker (instead of the #AEAEAE color code):

final ListGrid grid = new ListGrid() {
	@Override
	protected Canvas createRecordComponent(final ListGridRecord record,
			Integer colNum) {
		final String fieldName = this.getFieldName(colNum);
		FlavourModelMessages messages = (FlavourModelMessages) GWT
				.create(FlavourModelMessages.class);
			return null;
		if (false) {
			return null;
		}
		else if (fieldName.equals("Colour")) {
		     Label l = new Label();
		     String code = record.getAttribute("Colour");
		     l.setTitle(code);
			l.setHeight(22);
			l.setWidth(130);
			l.setBackgroundColor(code);
			return l;
		}

		else if (fieldName.equals("Twitter")) {
			HLayout canv = new HLayout();
			canv.setHeight(22);
			ImgButton tweetButton = new ImgButton();
			tweetButton.setShowDown(false);
			tweetButton.setShowRollOver(false);
			tweetButton.setAlign(Alignment.CENTER);
			tweetButton.setSrc(GWT.getHostPageBaseURL()
					+ "images/twitter-icon.png");
			tweetButton.setPrompt("Deel dit op Twitter.");
			tweetButton.setPrompt(messages.Twitter_prompt());
			tweetButton.setHeight(20);
			tweetButton.setWidth(20);
			tweetButton.setMargin(1);
			tweetButton.addClickHandler(new ClickHandler() {
				public void onClick(ClickEvent event) {
					FlavourTwitterTweetWindow l = new FlavourTwitterTweetWindow(
							record, fieldName);
					l.show();
					l.bringToFront();
				}
			});
			canv.addMember(tweetButton);
			return canv;
		}

		else if (fieldName.equals("Facebook")) {
			HLayout canv = new HLayout();
			canv.setHeight(22);
			ImgButton tweetButton = new ImgButton();
			tweetButton.setShowDown(false);
			tweetButton.setShowRollOver(false);
			tweetButton.setAlign(Alignment.CENTER);
			tweetButton.setSrc(GWT.getHostPageBaseURL()
					+ "images/facebook-icon.png");
			tweetButton.setPrompt(messages.Facebook_prompt());
			tweetButton.setHeight(20);
			tweetButton.setWidth(20);
			tweetButton.setMargin(1);
			tweetButton.addClickHandler(new ClickHandler() {
				public void onClick(ClickEvent event) {
					FlavourFacebookFacebookWindow l = new FlavourFacebookFacebookWindow(
							record, fieldName);
					l.show();
					l.bringToFront();
				}
			});
			canv.addMember(tweetButton);
			return canv;
		}
		else if (fieldName.equals("Hyves")) {
			HLayout canv = new HLayout();
			canv.setHeight(22);
			ImgButton tweetButton = new ImgButton();
			tweetButton.setShowDown(false);
			tweetButton.setShowRollOver(false);
			tweetButton.setAlign(Alignment.CENTER);
			tweetButton.setSrc(GWT.getHostPageBaseURL()
					+ "images/hyves-icon.png");
			tweetButton.setPrompt(messages.Hyves_prompt());
			tweetButton.setHeight(20);
			tweetButton.setWidth(20);
			tweetButton.setMargin(1);
			tweetButton.addClickHandler(new ClickHandler() {
				public void onClick(ClickEvent event) {
					FlavourHyvesHyvesWindow l = new FlavourHyvesHyvesWindow(
							record, fieldName);
					l.show();
					l.bringToFront();
				}
			});
			canv.addMember(tweetButton);
			return canv;
		}
		else {
         		return null;
		}
	}
};

Also here are my other initializations:

grid.setWidth100();
grid.setHeight100();
grid.setAlternateRecordStyles(true);
grid.setCellHeight(22);
grid.setDataSource(dataSource);
grid.setAutoFetchData(false);
grid.setCanEdit(true);
grid.setModalEditing(true);
grid.setShowFilterEditor(true);
grid.setDoubleClickDelay(100);
grid.setEditEvent(ListGridEditEvent.DOUBLECLICK);
grid.setListEndEditAction(RowEndEditAction.NEXT);
grid.setCanRemoveRecords(true);
grid.setAutoSaveEdits(true);
grid.setShowRecordComponents(true);
grid.setShowRecordComponentsByCell(true);
grid.setRecordComponentHeight(22);
grid.setDrawAheadRatio(2);

[Sytematic]

Update: when I remove the initializations (by overriding createRecordComponent()), the warning message does not show.

However, I do need those things, is there a way they could be implemented more efficiently? (although in Safari/FF/Chrome it still renders quickly)

[Isomorphic]

Don't use the recordComponents subsystem for trivial things like change of background color (easily achieved with a getCellCSSText() override) or basic image-based buttons (easily achieved with a field of type "icon").

Also, you're explicitly increasing the drawAheadRatio, which will slow down initial rendering and make you more likely to hit this IE bug.

[Sytematic]

Thanks for the quick reply.

I will try the implementation you suggested. This probably generates way too much markup now, and I see your point. Thanks.

The drawAheadRatio removal does not make a difference by the way. It probably has to do with the colourpicker. Not sure if I can do that without the current way: when the selection has changed, it will redraw the cell, with a label in it with the color of the cell. How could this be implemented differently?

[Isomorphic]

Yes, radically different (complete independent widget vs trivial change to cell styling), which is why the docs and sample contain dire warnings not to do what you're doing :)

Set up your getCellCSSText() override to be sensitive to something in the data and return different background colors conditionally, then use refreshCell() to cause the cell to be repainted.

[Sytematic]

Hehe, the moment I posted that I realized it was a stupid question, hence the quick edit. But not quick enough. Thanks, I'll get going.

[Sytematic]

Thanks, it all works now