Recordcomponents not drawn when scrolling fast

[kiril_bhd]

The problems seems to be only in IE8/9 and maybe also the lower versions but this is only a hypothesis.

Here's the testcase:

@Override
    public void onModuleLoad() {

        VLayout layout = new VLayout();

        ListGrid grid = new ListGrid() {

            @Override
            public Canvas createRecordComponent(final ListGridRecord record, Integer colNum) {
                String fieldName = this.getFieldName(colNum);
                if (fieldName.equals("field1")) {
                    HLayout recordCanvas = new HLayout(8);
                    recordCanvas.setHeight(22);
                    recordCanvas.setAlign(Alignment.CENTER);

                    ImgButton btn1 = new ImgButton();
                    btn1.setShowDown(false);
                    btn1.setShowRollOver(false);
                    btn1.setHeight(16);
                    btn1.setWidth(16);
                    btn1.setSrc("16x16/save.png");
                    ImgButton btn2 = new ImgButton();
                    btn2.setShowDown(false);
                    btn2.setShowRollOver(false);
                    btn2.setHeight(16);
                    btn2.setWidth(16);
                    btn2.setSrc("16x16/help.png");
                    ImgButton btn3 = new ImgButton();
                    btn3.setShowDown(false);
                    btn3.setShowRollOver(false);
                    btn3.setHeight(16);
                    btn3.setWidth(16);
                    btn3.setSrc("16x16/delete.png");
                    recordCanvas.addMember(btn1);
                    recordCanvas.addMember(btn2);
                    recordCanvas.addMember(btn3);
                    return recordCanvas;
                }
                return null;
            }
        };
        grid.setWidth(1000);
        grid.setHeight(500);
        grid.setCanGroupBy(false);
        grid.setCanFreezeFields(false);
        grid.setCanAutoFitFields(false);
        grid.setShowAllRecords(false);
        grid.setShowRecordComponents(true);
        grid.setShowRecordComponentsByCell(true);

        ListGridField field1 = new ListGridField("field1", "field1");
        ListGridField field2 = new ListGridField("field2", "field2");
        ListGridField field3 = new ListGridField("field3", "field3");
        ListGridField field4 = new ListGridField("field4", "field4");
        ListGridField field5 = new ListGridField("field5", "field5");
        ListGridField field6 = new ListGridField("field6", "field6");

        grid.setFields(field1, field2, field3, field4, field5, field6);
        ArrayList<ListGridRecord> records = new ArrayList<ListGridRecord>();
        for (int i = 0; i < 50000; i++) {
            ListGridRecord rec = new ListGridRecord();
            rec.setAttribute("field1", "");
            rec.setAttribute("field2", "field2" + i);
            rec.setAttribute("field3", "field3" + i);
            rec.setAttribute("field4", "field4" + i);
            rec.setAttribute("field5", "field5" + i);
            rec.setAttribute("field6", "field6" + i);
            records.add(rec);
        }
        grid.setData(records.toArray(new ListGridRecord[]{}));

        layout.addMember(grid);
        RootPanel.get().add(layout);
    }

Windows7 64bit, GWT 2.4, Smartgwt 3.0 build 2012-04-20

[ispasov]

Everyone else has reported this as fixed. We'd need to see a minimal, standalone test case to take a look again.

Thank you for the quick response. We will try to create a simple case that shows the issue.

[Isomorphic]

Everyone else has reported this as fixed. We'd need to see a minimal, standalone test case to take a look again.

[ispasov]

We have the same issue, but in SmartGWT.

We are using SmartGWT 3.0 build from this month, and when the number of records is large enough, fast-scrolling clears the image canvas.

I know it is the wrong sub-forum, but the problem seems to be exactly the same. Can you give us a hint?

(The screenshot is made in IE9)

[martintaal]

And also works fine now :-), thanks

gr. Martin

[Isomorphic]

Should be fixed - please try the next nightly (Sep 22 or greater)

Regards
Isomorphic Software

[martintaal]

Hi,
Bumped...

gr. Martin

[martintaal]

Hi,
I tested with the latest nightly 8.1 build, now the problem is different, frozen columns are not drawn.
I can easily reproduce this in the simpleFreeze example in the feature explorer. Just scroll down in a paged manner by clicking in the empty scroll bar. See the attached screenshot.

gr. Martin

[Isomorphic]

Thanks for the test case.
We believe we've got this one fixed. Please try the next nightly build (Sept 15 or greater)

Regards
Isomorphic Software

[martintaal]

Okay I can reproduce it on the demo site. I adapted this example:
http://www.smartclient.com/index.jsp#databoundFetch

with the code below. The code below adds a record component to each row in the first column.

To reproduce, scroll down to the bottom and then scroll up again. It is a bit random so you have to try maybe several times. But it took me only a few times to get non-drawn record components.

What you see is that the cell value is shown and no recordcomponent is drawn in the cell. See the attached screenshot.

Also it seems to go wrong if the record component is a layout, with just images it seems to work better.

This is on chrome 12 on Ubuntu, but it has been reported to me also on other browsers, I see it in the nightly 8.1 build from friday.

isc.ListGrid.create({
    ID: "countryList",
    width:500, height:224,
    dataSource: worldDS,
  autoFetchData: true,
    
    showRecordComponents: true,    
    showRecordComponentsByCell: true,  
    canRemoveRecords: true, 
recordComponentPoolingMode: 'recycle',
poolComponentsPerColumn: true,

    data: countryData,

    fields: [
        { name: "capital"},
        { name: "countryName", title: "Country" }
    ],

    createRecordComponent : function (record, colNum) {  
        if (colNum == 0) {  
            var recordCanvas = isc.HLayout.create({
                height: 22,
                align: "center"
            });

            var editImg = isc.ImgButton.create({
                showDown: false,
                showRollOver: false,
                layoutAlign: "center",
                src: "icons/16/comment_edit.png",
                prompt: "Edit Comments",
                height: 16,
                width: 16,
                grid: this,
                click : function () {
                    isc.say("Edit Comment Icon Clicked for country : " + record["countryName"]);  
                }
            });

            var chartImg = isc.ImgButton.create({
                showDown: false,
                showRollOver: false,
                layoutAlign: "center",
                src: "icons/16/chart_bar.png",
                prompt: "View Chart",
                height: 16,
                width: 16,
                grid: this,
                click : function () {
                    isc.say("Chart Icon Clicked for country : " + record["countryName"]);  
                }
            });

            recordCanvas.addMember(editImg);  
            recordCanvas.addMember(chartImg);  
            return recordCanvas;  
        }
    },
    dataPageSize: 50
})

[martintaal]

I tried to reproduce with this example:
http://www.smartclient.com/index.jsp#gridCellWidgets

by making the data set much larger, but it worked fine. My feel then is that it is somehow related to a server side datasource with paging. I will try to get a better example...

gr. Martin

[Isomorphic]

Can anyone show a test case that would allow this to be reproduced?

[BeezeR]

Hi.
I also have a similar problem.
I use GwtRpcDataSource and my grid has record component with some ImgButtons:

            @Override
            protected Canvas createRecordComponent(final ListGridRecord record, final Integer colNum) {
                String fieldName = this.getFieldName(colNum);
                if (fieldName.equals("action")) {
                    HLayout recordCanvas = new HLayout(5);
                    recordCanvas.setHeight(20);
                    recordCanvas.setAlign(Alignment.LEFT);
                    ImgButton deleteImg = createImgButton("Delete", "icon/cross_true.png");
                    deleteImg.addClickHandler(new ClickHandler() {
                         public void onClick(ClickEvent event) {
                            if (getOnDeleteAction() != null) {
                                getOnDeleteAction().execute(record.getAttribute("id"));
                            }
                        }
                    });
                    
                    
                    ImgButton publicImg = createImgButton("Public", "icon/documents.png");
                    publicImg.addClickHandler(new ClickHandler() {
                         public void onClick(ClickEvent event) {
                            if (getOnPublicAction() != null) {
                                getOnPublicAction().execute(record.getAttribute("id"));
                            }
                        }
                    });
                    
                    recordCanvas.addMember(deleteImg);
                    recordCanvas.addMember(publicImg);
                    
                    return recordCanvas;
                } else {
                    return null;
                }
                
            }

    public static ImgButton createImgButton(final String prompt, final String iconPath) {
        ImgButton button = new ImgButton();
        button.setShowDown(false);
        button.setShowRollOver(false);
        button.setLayoutAlign(Alignment.CENTER);
        button.setSrc(iconPath);
        button.setTooltip(prompt);
        button.setHeight(16);
        button.setWidth(16);
        return button;
    }

        grid.setShowAllRecords(true);
        grid.setShowFilterEditor(true);
        grid.setCanHover(true);
        grid.setAutoFetchData(true);
        grid.setShowRecordComponents(true);
        grid.setShowRecordComponentsByCell(true);
        grid.setSelectionType(SelectionStyle.SINGLE);
        grid.setFixedRecordHeights(false);
        grid.setCanReorderRecords(false);
        grid.setWrapCells(true);
        grid.setCanSort(true);
        grid.addCellClickHandler(new CellClickHandler() {
            @Override
            public void onCellClick(final CellClickEvent event) {
                if (getOnGridClickAction() != null) {
                    getOnGridClickAction().execute(event.getRecord().getAttribute("id"));
                }
            }
        });

After fetch data not all the lines are visible component. After some actions with grid(sort, filter) component(ImgButtonы) appears.

[martintaal]

Hi,
I have record components in frozen columns on the left. When I scroll fast through the grid then sometimes the record components are not drawn. See the attached image.

Is there a way for me to force redraw myself or a property I can set to overcome this issue?

I am using the latest 8.1 nightly on chrome 13 on ubuntu.

gr. Martin