BUG: Smartgwt 5.0. CreateRecordComponent breaks the ListGridRecord visually!

[kiril_bhd]

If we use createRecordComponents to add some images to the grid record, when a ListGridField gets sorted and then the grid is scrolled, the records become buggy (see the attached images).
After the bug happens, some record images are not drawn, some records increase their heights or records start overlapping...

So steps to reproduce:

1) Click on a field in order to sort it.
2) Start scrolling the in order to load the undrawn fields.

I have attached a very simple TestCase that shows the problem.

Another observation is that when I add an override of updateRecordComponent like this:

 
        @Override
         public Canvas updateRecordComponent(ListGridRecord record, Integer colNum, Canvas component, boolean recordChanged) {
                return createRecordComponent(record, colNum);
         }

there are no more missing images, but the grid records still get stretched out (see img: stretched.jpg)

Windows 7 64 bit.
Reproducible on IE11 and Chorme.
GWT 2.7, Smartgwt 5.0 LGPL.
SmartClient Version: v10.0p_2015-05-25/LGPL Development Only (built 2015-05-25).

[kiril_bhd]

Are there any updates on this one?

[Isomorphic]

It's queued to be looked at - we'll update here when we have more information.

[Blama]

Hi kiril,

in your sample you have

////////////////// THIS MAKES THINGS WORST  ////////////////////////////
grid.setRecordComponentPoolingMode(RecordComponentPoolingMode.RECYCLE);
////////////////////////////////////////////////////////////////////////

Does the issue also occur without the line? If not, there is no bug here IMHO (?).

Please see the docs for RecordComponentPoolingMode.RECYCLE. If you are using this mode, you have to implement/Override updateRecordComponent() in a reasonable way. Your fix of

@Override
public Canvas updateRecordComponent(ListGridRecord record, Integer colNum, Canvas component, boolean recordChanged) {
         return createRecordComponent(record, colNum);
}

basically disables RecordComponentPooling again (?).

Best regards
Blama

[kiril_bhd]

If I remove the line:

grid.setRecordComponentPoolingMode(RecordComponentPoolingMode.RECYCLE);

then the icons start missing for some rows (you can see the images).

If I add the line, then images are not missing any more but upon scrolling the records get stretched out and the images start overlapping.

Regards

[Blama]

Ok, then I have no idea.
Altough I noticed two points:

• Why do you have @Override before public void onModuleLoad()?
• You should use grid.draw() instead of RootPanel.get().add(grid)

I don't know if this makes any difference, but you can try. And of course you should use the HTML5 doctype (see FAQ and the BuiltInDS.java sample source)

[Isomorphic]

@kiril_bhd - we don't see these issues in any browser or any version of SmartGWT or SmartClient, with your test code or our own.

The points made by Blama are correct: use grid.draw() instead of rootPanel.add() and, if you use recordComponentPoolingMode: "recycle", install an implementation of updateRecordComponent() *that returns the component it is passed*, after making any changes appropriate for it being re-used in another row. Don't call createRecordComponent() again from that method.

[kiril_bhd]

Thank you, Isomorphic for the detailed analysis.
I think that we might be facing the wrong direction with this issue here.

You are right that calling createRecordComponent inside updateRecordComponent is a bad approach and this in combination with setRecordComponentPoolingMode(RecordComponentPoolingMode.RECYCLE) could cause the stretching, which could not be an abnormal behavior.

The general problem could be the simple missing of the Canvas items on some records.
Here is the example:

@Override
    public void onModuleLoad() {

        ListGrid grid = new ListGrid() {

            @Override
            public Canvas createRecordComponent(final ListGridRecord record, Integer colNum) {
                String fieldName = this.getFieldName(colNum);

                if (fieldName.equals("f1")) {
                    HLayout recordCanvas = new HLayout(8);
                    recordCanvas.setHeight(22);
                    recordCanvas.setAlign(Alignment.CENTER);

                    ImgButton i = new ImgButton();
                    i.setSrc("16x16/lock.png");
                    i.setHeight(16);
                    i.setWidth(16);
                    i.setShowDown(false);
                    i.setShowRollOver(false);
                    recordCanvas.addMember(i);

                    ImgButton i1 = new ImgButton();
                    i1.setHeight(16);
                    i1.setWidth(16);
                    i1.setShowDown(false);
                    i1.setShowRollOver(false);
                    i1.setSrc("16x16/delete.png");
                    recordCanvas.addMember(i1);
                    return recordCanvas;
                }
                return null;
            }
        };

        grid.setWidth100();
        grid.setHeight100();
        grid.setShowRecordComponents(true);
        grid.setShowRecordComponentsByCell(true);

        ListGridField f1 = new ListGridField("f1", "Field 1");
        ListGridField f2 = new ListGridField("f2", "Field 2");
        ListGridField f3 = new ListGridField("f3", "Field 3");

        grid.setFields(f1, f2, f3);

        List<ListGridRecord> list = new ArrayList<>();
        for (int i = 0; i < 500; i++) {
            ListGridRecord rec = new ListGridRecord();
            rec.setAttribute("f1", i);
            rec.setAttribute("f2", "f2 -> " + i);
            rec.setAttribute("f3", "f3 -> " + i);
            list.add(rec);
        }

        grid.setData(list.toArray(new ListGridRecord[]{}));

        grid.draw();
    }

Reproducing of the issue requires sorting and intense scrolling up and down.

I am currently using the latest build:
SmartClient Version: v10.0p_2015-07-07/LGPL Development Only (built 2015-07-07).
The browser is Chrome.

Best Regards

[Isomorphic]

This appears to be the same code you posted previously, minus the call to set the pooling mode, which we already removed when testing.

We don't see any issues here.

Unfortunately, "intense scrolling up and down" isn't really anything we can try to pin down. We've tried scrolling up and down and we see no issues.

[kiril_bhd]

@Isomorphic, the code is definitely from the stand-alone, but with grid.draw() and without the pooling mode. I was trying to show you that this simple example causes the problem.

The good news is that now I have simple steps to reproduce the issue, because as you have properly states: "intense scrolling up and down" isn't something that can be easily tracked down.


1) The first thing to do when the grid is drawn is to apply sort on 'field 3'. Please refer to screenshot 'step1.png' so you can see my whole screen at that time.

2) Now when the fields are sorted, apply a simple scroll down (just around record 151) and you should be able to see the problem. Please refer to screenshot 'step2.png' in order to see the problem.

Observation: In chrome the above steps always cause the issue on records 138 and 139.

My screen resolution: 1280x1024

Best Regards

[Isomorphic]

What does "apply a simple scroll down" mean? There are many ways of scrolling: programmatic, drag thumb, mouse wheel, click track, click scroll button, etc.

[kiril_bhd]

Sorry for the inaccuracy. Scroll with the mouse wheel is the way I'm reproducing it.

[kiril_bhd]

Are there any updates on this?

[Isomorphic]

It's assigned to an engineer, but hasn't been specifically addressed yet.

However, a separate fix was made on July 17 to our virtualScrolling mechanism, which affects the calculation of visible viewport-rows during scrolling, in circumstance like this (when rows contain embedded components, eg).

Please retry your testcase against the build dated July 18 on smartclient.com/builds and let us know if you still see the issue - in which case we'll take a look in the next day or two.

[kiril_bhd]

@Isomorphic, thank you for looking into this.
Unfortunately the problem is still there...
Please, keep me posted if you have a solution on that.

Regards!