ListGrid record component drawing issue

[bertreuer]

We run our application with SmartGWT 2.1 LGPL (additionaly this issue was tested in our company with 2.3 Power). We tested it with Firefox 3.6.11 and IE 8.

We use a ListGrid with a custom datasource connected to a MySQL database.
For easily editing a boolean value, we add two buttons (OK/NOT) to the grid by overriding createRecordComponent.

We add a HStack to the column and put two buttons inside.

There are some issues with the grid (especially the custom component) on rendering: The buttons that are on the viewport (and also some rows beneath) are rendered correctly. When the user scrolls the grid, then buttons are not shown at all beginning at a certain row until the end of the grid (please see attached screenshot).

We have also some buttons to change the datasource and force a invalidateCache() and fetchData() again on the grid. When performing this action, the custom buttons on the grid are (almost always) not rendered at all for all rows.

Strangely, when clicking on a grid header so sort this column, all buttons appear correctly.

Please see a test case and screenshot attached. The records for the datasource are statically generated for the test case.

Test.java:

package test;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.smartgwt.client.widgets.Button;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.grid.ListGridField;
import com.smartgwt.client.widgets.grid.ListGridRecord;
import com.smartgwt.client.widgets.layout.HStack;
import com.smartgwt.client.widgets.layout.VStack;

public class Test implements EntryPoint {
    
    public void onModuleLoad() {
        Canvas canvas = new Canvas();
        VStack l = new VStack();
        TestDS testDS = new TestDS();

        final ListGridField[] gridFields = new ListGridField[3];
        gridFields[0] = new ListGridField(TestDS.FIELD_NAME_KEY);
        gridFields[1] = new ListGridField(TestDS.FIELD_NAME_VALUE);
        gridFields[2] = new ListGridField(TestDS.FIELD_NAME_STATUS);
        
        final ListGrid grid = new ListGrid() {
            @Override
            protected Canvas createRecordComponent(final ListGridRecord record, final Integer colNum) {
                String fieldName = this.getFieldName(colNum);  
                if (fieldName.equals(TestDS.FIELD_NAME_STATUS)) {
                    HStack buttonStack = new HStack();
                    buttonStack.setHeight(25);
                    final Button ok = new Button("OK");
                    ok.setWidth(40);
                    ok.setHeight(25);
                    final Button not = new Button("NOT");
                    not.setWidth(40);
                    not.setHeight(25);
                    
                    ok.addClickHandler(new ClickHandler() {
                        public void onClick(ClickEvent event) {
                            ok.disable();
                            not.enable();
                            setEditValue(getRecordIndex(record), colNum, true);
                        }
                    });
                    
                    not.addClickHandler(new ClickHandler() {
                        public void onClick(ClickEvent event) {
                            ok.enable();
                            not.disable();
                            setEditValue(getRecordIndex(record), colNum, false);
                        }
                    });
                    
                    if (record.getAttributeAsBoolean(TestDS.FIELD_NAME_STATUS)) {
                        ok.setDisabled(true);
                        not.setDisabled(false);
                    } else {
                        ok.setDisabled(false);
                        not.setDisabled(true);
                    }

                    buttonStack.addMember(ok);
                    buttonStack.addMember(not);

                    return buttonStack;
                }

                return null;
            }
        };
        
        grid.setWidth(500);
        grid.setHeight(300);
        grid.setShowRecordComponents(true);
        grid.setShowRecordComponentsByCell(true);
        grid.setShowAllRecords(true);
        grid.setDataSource(testDS);
        grid.setAutoFetchData(false);
        grid.setFields(gridFields);
        grid.setCellHeight(60);
        
        l.addMember(grid);
        
        Button button = new Button("Refresh");
        button.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
                grid.invalidateCache();
                grid.fetchData();
            }
        });
        
        l.addMember(button);
        
        canvas.addChild(l);
        canvas.draw();
        grid.fetchData();
    }
}

TestDS.java:

package test;

import com.google.gwt.user.client.Random;
import com.smartgwt.client.data.DSRequest;
import com.smartgwt.client.data.DSResponse;
import com.smartgwt.client.data.DataSource;
import com.smartgwt.client.data.Record;
import com.smartgwt.client.data.fields.DataSourceBooleanField;
import com.smartgwt.client.data.fields.DataSourceTextField;
import com.smartgwt.client.types.DSDataFormat;
import com.smartgwt.client.types.DSProtocol;
import com.smartgwt.client.widgets.grid.ListGridRecord;

public class TestDS extends DataSource {
    
    public static final String FIELD_NAME_RESOURCE_KEY         = "skey";
    public static final String FIELD_NAME_VALUE                = "svalue";
    public static final String FIELD_NAME_STATUS               = "bstatus";
    
    public TestDS() {
        setDataProtocol(DSProtocol.CLIENTCUSTOM);
        setDataFormat(DSDataFormat.CUSTOM);
        setClientOnly(false);
        setAttribute("requiresAuthentication", true, false);
        
        DataSourceTextField key = new DataSourceTextField(FIELD_NAME_RESOURCE_KEY, "Key");
        key.setCanEdit(false);
        
        DataSourceTextField value = new DataSourceTextField(FIELD_NAME_VALUE, "Value");
        value.setCanEdit(true);
        
        DataSourceBooleanField status = new DataSourceBooleanField(FIELD_NAME_STATUS, "Status");
        status.setCanEdit(true);

        setFields(key, value, status);
    }
    
    @Override
    protected Object transformRequest(DSRequest request) {
        String     requestId = request.getRequestId();
        DSResponse response = new DSResponse();
        response.setAttribute("clientContext", request.getAttributeAsObject("clientContext"));

        response.setStatus(DSResponse.STATUS_FAILURE);

        switch (request.getOperationType()) {
            case FETCH:
                getTestRecords(requestId, response);
                break;
                
            default:
                break;
        }
        
        return request.getData();
    }
    
    private void getTestRecords(String requestId, DSResponse response) {
        Record data[] = new Record[100];
        
        for (int i=0; i<100; i++) {
            data[i] = new ListGridRecord();
            data[i].setAttribute(FIELD_NAME_RESOURCE_KEY, "Key " + (i+1));
            data[i].setAttribute(FIELD_NAME_VALUE, "Value " + (i+1));
            data[i].setAttribute(FIELD_NAME_STATUS, Random.nextBoolean());
        }
        
        response.setStatus(DSResponse.STATUS_SUCCESS);
        response.setData(data);
        this.processResponse(requestId, response);
    }
}

[rtidbdtr]

bertreuer did you get a response?

I have the same issue!

[bertreuer]

Unfortunately, I did not get a response.

Hence, I used a workaround for displaying checkboxes as status buttons:
I set grid.setBooleanFalseImage(...) and grid.setBooleanTrueImage(...) to 2 images displaying the current state as OK/NOTOK buttons. Then onEditorEnter() I change manually the boolean state via setEditValue() and call grid.endEditing() immediatetaly. This is not a really nice workaround, but at the moment at least for us the only working method.

[rtidbdtr]

Thats a shame. Thanks for letting me know

[mahbal]

Hi
Does requestID in TestDs.java means the datasource ID.